ElementUI表格 el-table实现自动循环滚动
效果:
<div class=""><el-table ref="xjwTable" :data="jrxjrwData" height="100%" border highlight-current-row @row-click=""><el-table-column prop="xjqy" label="巡检范围"></el-table-column><el-table-column prop="xjry" label="状态" width="70"></el-table-column><el-table-column prop="rwmc" label="任务名称" width="250"></el-table-column></el-table>
</div>
JS:
autoCycle() {//拿到相关元素const wrapper = this.$refs.xjwTable.bodyWrapper;this.timer = setInterval(() => {// 元素自增距离顶部1像素wrapper.scrollTop += 1// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)if (wrapper.clientHeight + wrapper.scrollTop == wrapper.scrollHeight) {// 重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小) - 整个高度/2wrapper.scrollTop = wrapper.scrollTop - wrapper.scrollHeight/2}}, 50)
},