1.前言
- 需求：制作大屏看板时，经常要展示表格数据，通常一页时放不下的，表格需要自动滚动，并维持表头固定
- 为何自己封装：网上的滚动组件由2类，一种传入json数据进行滚动，优点是可以做到表头固定，但是样式不方便自定义（DataV）,一直是常规滚动插件，不支持表头固定
2.实现思路及说明
- 使用插槽接收表格内容，便于用户自定义表格样式
- 渲染完毕后计算可滚动距离，使用定时器进行滚动，滚动到底则抛出事件
- 组件高度默认100%，需要自行给父容器设定高度
- 表头固定使用position: sticky进行实现，其实就是一个吸顶效果，需要给表头一个背景色，防止滚动时表体内容内容透过来
3.使用方法
<zy-table-scroll @scrollToEnd="scrollToEnd" @noScroll="noScroll" :data="tableData"><table><table>
</zy-table-scroll>
| 参数 |
说明 |
| data |
表格数据，数组格式，用于监听数据变化，重置滚动 |
| duration |
每次滚动距离（px），默认10 |
| step |
滚动时间间隔（毫秒），默认0.2 |
| @scrollToEnd |
滚动到底事件 |
| @noScroll |
当数据不为空，但是没有产生滚动条时触发 |
4.代码
<template><div class="table-scroll-wrap" ref="table-scroll-wrap"><slot></slot></div>
</template><script>
export default{props: {data: {type:Array,default: function(){return []}},//滚动间隔（毫秒）duration: {type: Number,default: 10},//每次滚动距离（px）step: {type: Number,default: 0.2}},data(){return {timer: null,//定时器}},//这里不用update，而是用watch进行监听，是因为插槽的缘故，会导致update异常watch: {data(){//等待渲染完毕this.$nextTick(()=>{//初始化滚动this.initScroll()})}},mounted(){//初始化滚动this.initScroll()},beforeDestroy(){//清除定时器clearInterval(this.timer)},methods: {//初始化滚动initScroll(){var box = this.$refs['table-scroll-wrap']//计算滚动距离var scrollDistance = box.scrollHeight - box.clientHeight//没产生滚动，不做处理if(scrollDistance <= 0){//事件抛出(空列表不抛出，防止数据冲突)if(this.data.length > 0){this.$emit('noScroll')}return}//回到顶部box.scrollTo({top: 0})//当前滚动距离var scrollTop = box.scrollTop//开启定时器执行滚动scrollToclearInterval(this.timer)this.timer = setInterval(()=>{//进行滚动if(scrollTop >= scrollDistance){//清除定时器clearInterval(this.timer)//事件抛出this.$emit('scrollToEnd')}else{//执行滚动scrollTop += this.stepbox.scrollTo({top: scrollTop})}},this.duration)}}
}
</script><style scoped lang="scss">
.table-scroll-wrap{height: 100%;overflow: auto;&::-webkit-scrollbar {width: 0;}table{tr{&:first-child{position: sticky;top:0;}}}
}
</style>
