ElementUI表格table使用JS控制滚动

ElementUI表格table使用JS控制滚动

需求

通过js来控制表格的某一行出现在可视区域中

分析和实现

在ElementUI中，并支持表格table组件的滚动，我这里通过js控制table的scrollTop来实现需求

框架封装好了的组件el-table，然而我们并不能直接获取到table，我通过一步步定位到table在el-table的位置，这里就不再阐述定位过程，直接上结果：

<el-table :data="tableData" 
          :highlight-current-row="true"
          ref="canvasTable"
>
          <el-table-column
	            :key="index"
	            :label="key.remark"
	            :prop="key.name"
	            v-for="(key, index) in columns"
          ></el-table-column>
</el-table>

//bodyWrapper是拆分组件后的table容器
let bodyWrapper = this.$refs.canvasTable.bodyWrapper
// e为行号
if (bodyWrapper.children[0].rows[e]) {
    bodyWrapper.scrollTop = bodyWrapper.children[0].rows[e].offsetTop
}

补充

由于这里是js控制，不能使用css的动画库来产生动画效果，但可以使用一些动画js库进行辅助实现，具体的大家可以自行尝试