关于在vue2中el-table制作自动滚动效果

最新推荐文章于 2024-08-30 16:36:13 发布

又写了一天BUG

最新推荐文章于 2024-08-30 16:36:13 发布

阅读量516

点赞数 10

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/I_Allen_Liu/article/details/141632032

版权

大致效果是，表头固定，内容自动向下滚动，滚动到最后一行时重新回到第一行再次滚动。

<div class="tables" @mouseout="mouseout" @mouseover="mouseover">
    <el-table
          :data="tableData"
          height="17vh"
          stripe
          style="background: rgba(26, 60, 128, 0.8)"
        >
          <el-table-column prop="name" label="xx" align="center" />
          <el-table-column prop="xxx" label="xx" align="center">
            <template slot-scope="scope">
              <span style="color: rgb(255, 246, 18);">{{scope.row.xxx}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="时间" align="center" />
        </el-table>
  </div>

created(){
    this.mouseover();
    this.mouseout();  
  },

data(){
    return{
        timer: null,
    }
},
methods:{
    mouseover() {
      clearInterval(this.timer);
    },
    mouseout() {
      this.autoScroll(false);
    },
    // 自动轮播效果
    autoScroll(init) {
      this.$nextTick(() => {
        const t = 50;
        const box = this.$el.querySelector(".el-table__body-wrapper");
        const content = this.$el.querySelector(".el-table__body");
        if (init) box.scrollTop = 0;
        this.timer = setInterval(() => {
          this.rollStart(box, content);
        }, t);
      });
    },
    rollStart(box, content) {
      if (box.scrollTop >= content.scrollHeight - box.offsetHeight) {
        // 如果已经滚动到最后一条数据，将滚动位置重置为0，实现无缝轮播的效果
        box.scrollTop = 0;
      } else {
        box.scrollTop++;
      }
    },
},