vue el-table自动无限滚动_el-table无缝滚动

原先方案是用el-table-column插件来实现但发现在el-table-column的原理是copy原数据做为第二份数据中show-overflow-tooltip会失效,所以换了个JS写法

代码如下:

<div class="table_box2">
              <el-table
                ref="scroll_table"
                height="476"
                solt="append"
                :data="categoryDataList"
                @cell-mouse-enter="mouseEnter"
                @cell-mouse-leave="mouseLeave"
              >
                <el-table-column
                  v-for="(item, index) in categoryColumList"
                  :key="index + 'i'"
                  :label="item.label"
                  :prop="item.prop"
                  :width="item.width"
                  :min-width="item.minWidth"
                  show-overflow-tooltip
                />
              </el-table>
            </div>

js 

  methods: {
    // 鼠标进入
    mouseEnter() {
      this.autoPlay = false;
    },
    // 鼠标离开
    mouseLeave() {
      this.autoPlay = true;
    },
    startMove() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.scroll_table;
      if (table) {
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper;
        if (divData) {
          if (this.timer) {
            clearInterval(this.timer);
          }
          // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每20毫秒移动1像素)
          this.timer = setInterval(() => {
            if (this.autoPlay) {
              // 元素自增距离顶部1像素
              if (divData.scrollTop >= 33) {
                const item = this.categoryDataList.shift();
                this.categoryDataList.push(item);
                divData.scrollTop -= 33;
              }
              divData.scrollTop += 1;
            }
          }, 20);
        }
      }
    }
  }