这篇博客展示了如何在React应用中实现el-table组件的无缝滚动效果。通过监听表格的DOM元素，并设置定时器调整div的scrollTop属性，当元素滚动到底部时重置其位置，从而达到无缝滚动的视觉体验。
复制代码可以直接用
element-ui table自动滚动:data="tableData"
height="300"
border
style="width: 70vw"
ref="table">
prop="date"
label="日期"
width="180">
prop="name"
label="姓名"
width="180">
prop="address"
label="地址">
new Vue({
el: '#app',
data() {
return {
// 表格数据
tableData: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
},
mounted() {
// 拿到表格挂载后的真实DOM
const table = this.$refs.table
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper
// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 1
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0
}
}, 100)
}
})
1681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
