<el-table :data="tableData" ref="table" height="100%" show-summary class="elTable" @cell-mouse-enter="MouseEnter" @cell-mouse-leave="MouseLeave">
<el-table-column prop="stationName" label="1111" align="center" sortable></el-table-column>
<el-table-column prop="stationName" label="1111" align="center" sortable></el-table-column>
<el-table-column prop="stationName" label="1111" align="center" sortable></el-table-column>
<el-table-column prop="stationName" label="1111" align="center" sortable></el-table-column>
<el-table-column prop="stationName" label="1111" align="center" sortable></el-table-column>
</el-table>
data() {
return {
interval: '',
};
},
mounted() {
this.interval = setInterval(this.scroll, 1000);
},
beforeDestroy() {
clearInterval(this.interval);
},
methods: {
scroll() {
let maxHeight = this.$refs.table.$el.querySelectorAll('.el-table__body')[0].offsetHeight;
let clientHeight = this.$refs.table.bodyWrapper.clientHeight;
if (Math.abs(this.$refs.table.bodyWrapper.scrollTop - (maxHeight - clientHeight)) < 5) { //预留5像素误差
this.$refs.table.bodyWrapper.scrollTop = 0;
} else {
this.$refs.table.bodyWrapper.scrollTop += 45;//32是每一行表格的高度,每秒滚一行
}
},
MouseEnter() {//鼠标移入停止滚动
clearInterval(this.interval);
},
MouseLeave() {//鼠标离开继续滚动
this.interval = setInterval(this.scroll, 1000);
},
实现el-table表格自动上移
最新推荐文章于 2024-08-01 10:36:07 发布