element中table 添加滚动效果

最新推荐文章于 2024-03-12 15:27:58 发布

TortyE

最新推荐文章于 2024-03-12 15:27:58 发布

阅读量454

点赞数 1

分类专栏： Element UI 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/TortyE/article/details/134528509

版权

Element UI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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) // 滚动速度

}