el-table 滚动条重置 手动控制滚动条

最近在使用 el-table 的时候，出现一个问题：

表头过长的时候，会有左右滑动的操作，当我们把表格拉到最右侧，这个时候重新请求数据的话，表格位置还是在最右侧，不会恢复原位。

那我们想恢复原位，又不想重新渲染整个表格怎么办呢？

办法当然是有的！

我么可以发现，表格在不同位置，样式也是有些微差别的。

• 表格滚动条在最左侧，is-scrolling-left
  
• 表格滚动条在中间，is-scrolling-middle
  
• 表格滚动条在最右侧，is-scrolling-right
  

所以，我们判断组件是有相对应的方法的。

我们打印 table实例，可以看到上面挂载了非常多的方法，其中好多文档都没有介绍。

在这里，就有相对应的方法。

• setScrollLeft ：设置滚动条距离左侧的距离，接收一个数字作为参数。
• setScrollTop ：设置滚动条距离顶部的距离，接收一个数字作为参数。

<template>
	<el-table ref="tableRef"></el-table>
</template>
<script lang="ts" setup>
const tableRef = ref<any>(null);

const search = () => {
	...
	// 每次查询完成后，手动重置一下滚动条的位置
	tableRef.value.setScrollLeft(0);
}
</script>

你学会了吗？