实现elementUI 中el-table的自动滚动

1.要实现自动滚动首先需要给el-table设置一个固定高度

            <el-table
              ref="tableDemo"
              :data="memberTableData"
              row-class-name="member-table-row-mame"
              header-cell-class-name="member-table-header-cell"
              :header-row-style="{ height: '12px' }"
              cell-class-name="member-table-cell-mame"
              header-row-class-name="member-table-head-row-mame"
              height="187" // 设置高度
              @cell-mouse-leave="memberListStartScroll" //鼠标移入单元格开启滚动
              @cell-mouse-enter="memberListStopScroll" // 鼠标移出单元格停止滚动
            >
              <el-table-column prop="key" label="负责人" />
              <el-table-column prop="value" label="任务数" />
              <el-table-column label="占比">
                <template slot-scope="scope">
                  {{ (scope.row.value1 * 100).toFixed(2) + '%' }}
                </template>
              </el-table-column>
            </el-table>

2.思路:el-table是通过控制.el-table__body在el-table__body-wrapper容器中滚动来实现,所以我们只需要通过定时器修改el-table__body-wrapper的scrollTop来实现自动滚动,无缝滚动只需要将数据复制一份拼接起来即可

3.滚动方法实现

    // 开启滚动
    memberListStartScroll() {
        const step = 1
        const stepTime = 100
        // 判断是否需要滚动
        if (this.memberTableData.length <= 5) {
          this.memberTableData = this.copyMemberTableData
          return
        } else {
        // 需要滚动将数据赋值一份
          this.memberTableData = this.copyMemberTableData.concat(this.copyMemberTableData)
          // 通过 ref获取el-table__body-wrapper的dom元素
          const scrollWrapper = this.$refs.tableDemo.$el.querySelector('.el-table__body-wrapper')
          // 开启一个定时器控制滚动
          this.memberScrollTimer = setInterval(() => {
            if (scrollWrapper.scrollHeight / 2 <= scrollWrapper.scrollTop) {
              scrollWrapper.scrollTop = 0
            } else {
              scrollWrapper.scrollTop += step
            }
          }, stepTime)
        }
      },
      
    // 停止滚动   
    memberListStopScroll() {
        clearInterval(this.memberScrollTimer)
        this.memberScrollTimer = void 0
      },