手写vue elementUI表格轮播效果-优快云博客

本文链接：https://blog.youkuaiyun.com/shangshudai/article/details/124630847

该博客展示了如何在Vue项目中创建一个自动滚动的表格。通过监听鼠标进入和离开表格区域，动态调整定时器来实现平滑滚动。示例代码包括了HTML结构和JavaScript逻辑，其中使用了Element UI组件库的表格组件，并在鼠标离开表格时触发tableScroll方法，当表格滚动到底部时会自动返回顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<el-table :data="tableData" style="width: 100%" ref="scroll_table" height="200" class="scroll_table">
       <el-table-column prop="date" label="日期" width="180">
       </el-table-column>
       <el-table-column prop="name" label="姓名" width="180">
       </el-table-column>
       <el-table-column prop="address" label="地址">
       </el-table-column>
</el-table>

 data() {
    return {
                scrollTimer: null,
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎1',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎2',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎3',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎4',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎5',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎6',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎7',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎8',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
         },
     mounted () {
                this.tableScroll();
                let that = this;
                // 监听鼠标移动到盒子上清除定时器
                document.querySelector(".scroll_table").addEventListener("mouseenter", function () {
                    clearInterval(that.scrollTimer);
                    // 这里使用false(冒泡)
                }, false);
                //  鼠标离开时再次执行函数
                document.querySelector(".scroll_table").addEventListener("mouseleave", function () {
                    that.tableScroll();
                }, false);
            },
      methods: {
                tableScroll() {
                    const table = this.$refs.scroll_table;
                        //获取滚动的盒子 这里拿到的是 .el-table__body-wrapper
                    const scroll_box = table.bodyWrapper; 
                    this.scrollTimer = setInterval(() => {
                        // 每次滚动一像素
                        scroll_box.scrollTop += 1;
                        if (
                            // 判断是否滚到底部
                            scroll_box.clientHeight + scroll_box.scrollTop + 1 >
                            scroll_box.scrollHeight
                        ) {
                            // 滚到底部后回到顶部
                            scroll_box.scrollTop = 0;
                        }
                        // 时间尽量设短一些,效果比较流畅
                    }, 30);
                },
            },