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();
    },
    
    
  • 相关阅读:
    高手详解SQL性能优化十条经验
    大并发大数量中的MYSQL瓶颈与NOSQL介绍
    数据库索引的作用和优点缺点
    数据库优化方法整理
    Java中Date和Calender类的使用方法
    常用正则表达式大全 (转)
    java 反射的实例
    JAVA路径问题
    jsp ${param.id}用法
    jsp base标签与meta标签学习小结
  • 原文地址:https://www.cnblogs.com/xuwupiaomiao/p/15218897.html
Copyright © 2011-2022 走看看