当前位置: 首页 > article >正文

42、element表格内容溢出自动往上滚动,鼠标移入停止滚动,溢出继续滚动

vue模块,添加ref属性

<v-table ref="rollTable" style="margin: 0!important;" :loading="TBloading" :isIndex="true" :tableData="tableData"
                           :tableHead="tableHead"
                           :paginationShow="false"
                           :autoGN="true"
                  >
                    <template v-slot:wcName="slotData">
                      <span
                          :style="{color:slotData.data.is == '未完成' ? '#FF8A24' : '#00F69A'}">{{
                          slotData.data.is
                        }}</span>
                    </template>
                  </v-table>
infinitScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.rollTable.tableElement;
      // console.log(table,'table')
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      divData.onmouseover = function () {
        clearInterval(rolltable);
      }; //鼠标移入,停止滚动
      divData.onmouseout = function () {
        start();
      }; //鼠标移出,继续滚动

      // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每1秒移动20像素)
      let rolltable;

      function start() {
        // 数据少于表格高度停止滚动
        if (divData.clientHeight >= divData.scrollHeight) {
          return;
        }
        rolltable = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 4;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
      };
      setTimeout(()=>{
        start();
      },100)
    }

在获取表格数据时引用以上方法

在这里插入图片描述


http://www.kler.cn/a/134943.html

相关文章:

  • WordPress 6.7 “Rollins”发布
  • 关于GCC内联汇编(也可以叫内嵌汇编)的简单学习
  • WordPress HTTPS 配置问题解决方案
  • MySQL系列之如何在Linux只安装客户端
  • 蓝桥杯每日真题 - 第7天
  • 矢量拟合(1)Sanathanan–Koerner算法
  • 【前端学java】Java中的异常处理(15)完结
  • 【面试经典150 | 算术平方根】
  • SELinux零知识学习十九、SELinux策略语言之类型强制(4)
  • SpringCloud微服务:Nacos的集群、负载均衡、环境隔离
  • 设置 wsl 桥接模式
  • 为什么越来越多人选择学习Python?
  • SystemV共享内存
  • 一生一芯18——Chisel模板与Chisel工程构建
  • 安防视频监控平台EasyCVR服务器部署后出现报错,导致无法级联到域名服务器,该如何解决?
  • 数据结构——树状数组
  • 拜托!佛系点,你只是给社区打工而已
  • 设计模式(5)-使用设计模式实现简易版springIoc
  • 单链表相关面试题--3.给定一个带有头结点 head 的非空单链表,返回链表的中间结点。如果有两个中间结点,则返回第二个中间结点
  • Java的IO流-打印流
  • 【机器学习】特征工程:特征选择、数据降维、PCA
  • OpenCV C++ 图像 批处理 (批量调整尺寸、批量重命名)
  • 关于漏洞:检测到目标SSL证书已过期【原理扫描】
  • 自用函数(持续更新)
  • 数理统计的基本概念(一)
  • Selenium UI 自动化