zoukankan      html  css  js  c++  java
  • vue + elememt ui table 实现滚屏效果

    1.html部分

     <template>
         <el-table
             :data="tableData"
             height="533"
             style=" 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();
    },
    
    
  • 相关阅读:
    快速排序
    fedora 配置
    while与do while
    switch选择结构
    if选择结构
    java有参
    java猜拳
    java类的无参方法
    java类与对象
    java数组
  • 原文地址:https://www.cnblogs.com/xuwupiaomiao/p/15218897.html
Copyright © 2011-2022 走看看