-
有这样的一个需求在大屏上有一个表格 内容很多, 高度固定的, 一屏展示不完全,客户需要滚动显示行
ElScroll代码实现如下
class ElScroll { constructor(Wrapper, timer = 100) { this.setIntervalTimer = null this.Wrapper = Wrapper this.timer = timer } start() { this.stop() // const table = this.refsTable // 拿到表格中承载数据的div元素 const divData = this.Wrapper // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素) this.setIntervalTimer = setInterval(() => { if (divData.scrollHeight === 0) return // 元素自增距离顶部1像素 divData.scrollTop += 3 // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度) if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) { // 重置table距离顶部距离 divData.scrollTop = 0 } }, this.timer) } stop() { clearInterval(this.setIntervalTimer) this.setIntervalTimer = null }}export default ElScroll
普通的使用场景如何使用这个类
<div id='box'> 这是你的容器</div>
const boxDom = document.getElementById('box')
const boxElScroll=new ElScroll(boxDom)
开始滚动
boxElScroll.start()
// 停止滚动
boxElScroll.stop()
vue中使用el-table时
<template> <el-table ref="singleTable" :height='800' :data="tableData"> <el-table-column type="index" label="序号" width="50"> </el-table-column> <el-table-column property="date" label="日期" width="220"> </el-table-column> <el-table-column property="name" label="姓名" width="220"> </el-table-column> <el-table-column property="address" label="地址"> </el-table-column> </el-table>
</template><script>
mounted(){
const table = this.$refs.singleTable const ctableScorll = new Scorll(table.bodyWrapper) ctableScorll.start()
}
</script>