依赖
“vue”: “^3.2.45”,
“element-plus”: “^2.2.21”
组件
<el-table ref="table" :height="tableHeight" :data="list" border stripe >
<el-table-column align="center" ></el-table-column>
<el-table-column align="center" ></el-table-column>
<el-table-column align="center" ></el-table-column>
</el-table>
代码
export default {data() {
return{time:''}
},
computed:{tableHeight(){
let h =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
return h-28
}
},
mounted() {this.autoScroll();
},
beforeUnmount() {if (this.timer) {clearInterval(this.timer);
}
},
methods:{autoScroll(init) {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++}
}
}
}
成果