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库进行辅助实现,具体的大家可以自行尝试