<div class="biaoge biaoge_list " style="width:100%; height:36vh">
<div class="regional_table">
<el-table :data="nocompleteList" :max-height="500" ref="scrollTable" style="width: 100%"
>
<el-table-column prop="billDate" label="单据日期">
</el-table-column>
<el-table-column prop="itemName" label="存货名称">
</el-table-column>
<el-table-column prop="techName" label="工序" with="30">
</el-table-column>
<el-table-column prop="outNum" label="派工数量" with="30">
</el-table-column>
<el-table-column prop="has" label="完工数量" with="30">
</el-table-column>
</el-table>
</div>
</div>
js方法
mounted(){
setInterval(() => {
//滚动方法
this.autoScroll()
}60 * 60 * 1000)
}
//离开时销毁
beforeDestroy(){
this.autoScroll(true)
}
methods:{
const table = this.$refs.scrollTable
// 拿到表格中承载数据的div元素
const divData = table.$refs.bodyWrapper
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
if (stop) {
//再通过事件监听,监听到 组件销毁 后,再执行关闭计时器。
// window.clearInterval(this.scrolltimer)
} else {
this.scrolltimer = window.setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 1
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0
// 重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小) - 整个高度/2
// divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
}
}, 100) // 滚动速度
}