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();
},


 

上一篇:前端 | 页面触底自动加载 Vue 组件


下一篇:vue单页应用 h5页面-吸顶效果-锚点定位-滚动到相应的位置激活tab