el-table / u-table 大屏自动滚动

使用背景

大屏使用el-table进行数据自动滚动

注意

1. 一次性获取所有数据显示并自动滚动，不再获取分页
2. 大屏列表数据滚动的时候，如果数据量少，则可使用el-table组件；如果数据量多，则使用u-table组件，避免卡顿
3. 功能：获取数据后列表自动滚动，鼠标移入列表停止滚动，移出则继续滚动

实现步骤

1. 列表代码，这里以u-table为例

<u-table ref="table" :data="tableData" highlight-current-row use-virtual :row-height="35" row-key="id" @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" :height="500px" :key="tableKey">
	<u-table-column align="center" prop="no" label="单号" show-overflow-tooltip min-width="120" />
	<u-table-column align="center" prop="name" label="名称" show-overflow-tooltip min-width="150" />
	<u-table-column align="center" prop="date" label="日期" show-overflow-tooltip min-width="100" />
	<u-table-column align="center" prop="status" label="状态" show-overflow-tooltip min-width="80">
	    <template #default="scope">
	        <span v-if="scope.row.status === 10" class="status-10">未接收</span>
	        <span v-if="scope.row.status === 20" class="status-7">部分接收</span>
	    </template>
	</u-table-column>
</u-table>

2. js代码

<script>
export default {
	data() {
		return {
			tableData: [],
			tableKey: +new Date(),
			scrollTop: 0//table距离顶部距离
		};
	},
	mounted() {
       this.search();// 刷新数据
    },
    beforeDestroy() {
        this.dataDestroy();// 页面摧毁前，关闭定时器
    },
    methods: {
        // 鼠标进入，清除定时器
        mouseEnter() {
            clearInterval(this.scrollTimer);
        },
        // 鼠标离开，开启定时器
        mouseLeave() {
            this.infinitScroll();
        },
        // 开启定时滚动
        infinitScroll() {
            clearInterval(this.scrollTimer);
            this.$nextTick(() => {
                // rowHeight：行高     data：表格数据     newHeight：表格可视高度
                const table = this.$refs.table;// 拿到表格挂载后的真实DOM
                // 拿到表格中承载数据的div元素
                let allHeight = table.rowHeight * table.data.length;// 获取表格的实际高度 = 每一行的高度 * 总数据行
                // 当表格可视高度 >= 表格实际高度(说明数据都可视不用滚动)，则不执行滚动定时器
                if (table.newHeight >= allHeight) {
                    return;
                }
                // 设置滚动定时器
                this.scrollTimer = setInterval(() => {
                    // 如果表格可视高度 + 表格距离顶部的高度 > 表格实际高度(滚到底部)，则重置距离顶部高度，从头滚动
                    if (table.newHeight + this.scrollTop > allHeight) {
                        this.scrollTop = 0;// 重置table距离顶部距离
                        this.$refs.table.pagingScrollTopLeft(this.scrollTop, 0);
                    }else{ // 否则每次向下滚动一行
                        this.scrollTop += table.rowHeight;
                        this.$refs.table.pagingScrollTopLeft(this.scrollTop, 0);
                    }
                }, 500);
            });
        },
        // 查询
        search() {
        	// 调用接口获取数据
        	this.$nextTick(() => {
        		// 获取数据后，调用方法打开定时器
                this.infinitScroll();
            });
        },
        // 关闭定时器
        dataDestroy() {
            if (this.scrollTimer) {
                clearInterval(this.scrollTimer); // 在Vue实例销毁前，清除我们的定时器
            }
        }
}
</script>