vue表格轮播插件

1.前言

• 需求：制作大屏看板时，经常要展示表格数据，通常一页时放不下的，表格需要自动滚动，并维持表头固定
• 为何自己封装：网上的滚动组件由2类，一种传入json数据进行滚动，优点是可以做到表头固定，但是样式不方便自定义（DataV）,一直是常规滚动插件，不支持表头固定

2.实现思路及说明

• 使用插槽接收表格内容，便于用户自定义表格样式
• 渲染完毕后计算可滚动距离，使用定时器进行滚动，滚动到底则抛出事件
• 组件高度默认100%，需要自行给父容器设定高度
• 表头固定使用position: sticky进行实现，其实就是一个吸顶效果，需要给表头一个背景色，防止滚动时表体内容内容透过来

3.使用方法

• 引入该插件，将目标表格用此组件标签进行包裹

<zy-table-scroll @scrollToEnd="scrollToEnd" @noScroll="noScroll" :data="tableData">
    <table><table>
</zy-table-scroll>

• 参数说明

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
            //开启定时器执行滚动scrollTo
            clearInterval(this.timer)
            this.timer = setInterval(()=>{
                //进行滚动
                if(scrollTop >= scrollDistance){
                    //清除定时器
                    clearInterval(this.timer)
                    //事件抛出
                    this.$emit('scrollToEnd')
                }else{
                    //执行滚动
                    scrollTop += this.step
                    box.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>