vue el-table的列表滚动,单张表的表头固定内容滚动
vue el-table的列表滚动,单张表的表头固定内容滚动使用场景:当需要表格内容循环滚动显示时。做了优化的点: 1.单张表实现滚动。2.滚动的高度随着窗口高度自适应。3.鼠标悬浮表格内停止滚动。代码:首先需要将表格用ref绑定一个值名通过this.$refs.值名来获取,定义个tableHeight获取高度。<el-table :data="islist" ref="table" :ma
·
vue el-table的列表滚动,单张表的表头固定内容滚动
使用场景:当需要表格内容循环滚动显示时。
做了优化的点: 1.单张表实现滚动。2.滚动的高度随着窗口高度自适应。3.鼠标悬浮表格内停止滚动。
代码:
首先需要将表格用ref绑定一个值名通过this.$refs.值名来获取,定义个tableHeight获取高度。
<el-table :data="islist" ref="table" :max-height="tableHeight" @cell-mouse-enter="mouseover" @cell-mouse-leave="mouseout">
</el-table>
data(){
return {
tableHeight: 50,
myTimer: null,
}
}
mounted () {
this.$nextTick(function () {
this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
//50为预留el-table到浏览器底部的高度
})
this.roll()
},
roll () {
// 拿到表格挂载后的真实DOM
const table = this.$refs.table
// 拿到表格中承载数据的div元素
const bodyWrapper = table.bodyWrapper
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
this.timer = setInterval(() => {
// 元素自增距离顶部1像素
bodyWrapper.scrollTop++
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (bodyWrapper.clientHeight + bodyWrapper.scrollTop == bodyWrapper.scrollHeight) {
// 重置table距离顶部距离
bodyWrapper.scrollTop = 0
}
}, 120)
},
mouseover() {
clearInterval(this.myTimer)
},
mouseout() {
this.roll()
},
更多推荐
已为社区贡献4条内容
所有评论(0)