vue+elementPlus table自动滚动

依赖
"vue": "^3.2.45",
"element-plus": "^2.2.21"

模板

<el-table ref="table" :height="tableHeight" :data="list" border stripe >
 <el-table-column prop="date" label="Date" width="180" />
 <el-table-column prop="name" label="Name" width="180" />
 <el-table-column prop="address" label="Address" />
</el-table>

组件

export default {
 data() {
 return{
 list:[],
 time:''
 }
 },
 computed:{
 tableHeight(){
 let h =
 window.innerHeight ||
 document.documentElement.clientHeight ||
 document.body.clientHeight;
 return h
 }
 },
 mounted() {
 this.getList();
 this.autoScroll();
 },
 beforeUnmount() {
 if (this.timer) {
 clearInterval(this.timer);
 }
 },
 methods:{
 getList(){
 let list = []
 for(var i=0;i<30;i++){
 list.push({
 date: '2023-05-19',
 name: 'Tom',
 address: 'No. 189, Grove St, Los Angeles',
 })
 }
 this.list = list;
 },
 autoScroll() {
 this.$nextTick(() => {
 const t = 50
 const box = this.$el.querySelector('.el-scrollbar__wrap')
 const content = this.$el.querySelector('.el-table__body')
 this.timer = setInterval(() => {
 this.rollStart(box, content)
 }, t)
 })
 },
 rollStart(box, content) {
 if (box.scrollTop >= (content.scrollHeight - box.offsetHeight)) {
 box.scrollTop = 0
 } else {
 box.scrollTop++
 }
 }
 }
}

效果

作者:quanta原文地址:https://segmentfault.com/a/1190000043807389

%s 个评论

要回复文章请先登录注册