el-table如何使内容无限循环滚动?

1,101 阅读1分钟

  • 有这样的一个需求在大屏上有一个表格 内容很多, 高度固定的,  一屏展示不完全,客户需要滚动显示行

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>