vue + elememt ui table 实现滚屏效果

1.html部分

 <template>
     <el-table
         :data="tableData"
         height="533"
         style="width: 100%"
         @mouseenter.native="mouseEnter"
         @mouseleave.native="mouseLeave"
         ref="table"
       >
      <el-table-column prop="addr" align="center" label="机场" >
      </el-table-column>
      <el-table-column prop="note" align="center" label="关闭信息" >
      </el-table-column>
      <el-table-column prop="closeTime" align="center" label="关闭起止时间" >
      </el-table-column>
      </el-table>
 </template>

2.js 部分

//  表格滚动
tableScroll: function (stop) {
    if (stop) {
        clearInterval(rolltimer)
        return
    }
    // 拿到表格挂载后的真实DOM
    const table = this.$refs.table
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper;
    //console.log(divData.clientHeight,divData.scrollTop,divData.scrollHeight)
    rolltimer = setInterval(() => {
        if(divData.scrollHeight-divData.scrollTop>divData.clientHeight){
            // 元素自增距离顶部像素
            divData.scrollTop +=divData.clientHeight;
            // console.log(divData.scrollHeight-divData.scrollTop) 
        }else{
            //当滚动高度不够时 进行计算
            divData.scrollTop+= (divData.scrollHeight-divData.scrollTop);
            divData.scrollTop = 0;
        }
    }, 10000)
},

// 鼠标进入
mouseEnter() {
    // 鼠标进入停止滚动和切换的定时任务
    this.tableScroll(true)

},
// 鼠标离开
mouseLeave() {
    // 开启表格滚动
    this.tableScroll();
},

标签：滚屏,表格,tableScroll,vue,ui,divData,table,scrollTop,scrollHeight
来源： https://www.cnblogs.com/xuwupiaomiao/p/15218897.html