el-table表格自动滚动实现 + vue-seamless-scroll 插件的实现

随笔写

于 2024-08-23 17:32:08 发布

阅读量2.1k

点赞数 33

分类专栏：日积月累_前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50559423/article/details/141470638

版权

日积月累_前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本片文章主要描述 vue 项目中实现表格内容滚动，数据定时刷新，鼠标放上停止滚动等功能。在这里也介绍了vue-seamless-scroll插件的使用，及插件的问题。需求功能性解决。

实现效果如下：

主要功能点：

1. 当表格内容超出时，自动滚动，滚动到最后一条之后在从头滚动。

2. 表格中的数据会定时刷新，刷新后数据更新。

3. 鼠标移入表格中，停止滚动；移出后，继续滚动。

4. 点击表格中的排序功能，拉取后端数据，从头滚动。

先说一说实现过程中遇到的大坑吧

坑1： vue-seamless-scroll依赖的使用

1. 安装并对应引入

yarn add vue-seamless-scroll

局部引入：

在这里插入图片描述

import vueSeamlessScroll from "vue-seamless-scroll";
 
components: { vueSeamlessScroll },

2. 使用

用该组件包住要滚动的表格，并将表格数据传进去

在这里插入图片描述

参数：tableData是我的表格数据数组，defineScroll是滚动的参数，参考如下：

在这里插入图片描述

实现代码如下：

classOption() {
   return {
     step: 0.5, // 数值越大速度滚动越快
     limitMoveNum: 5, // 开始无缝滚动的数据量
     hoverStop: true, // 是否开启鼠标悬停stop
     direction: 1, // 0向下 1向上 2向左 3向右
     openWatch: true, // 开启数据实时监控刷新dom
     singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
     singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
     waitTime: 500, // 单步运动停止的时间(默认值1000ms)
   };
 },

3. 实际效果：

表头也会跟着滚动，要想表头不滚动很简单，利用两个表格组件，

a. 需要滚动的表格去掉表头，用vueSeamlessScroll 组件包着，

b. 将另一个表格放在vueSeamlessScroll 组件外边，只显示表格标题。

除此之外这个组件有个缺陷：数据更新的时候，dom却不会更新。

如上图，当数据量从17变为15时，滚动的dom的高度依旧是17的高度。为了解决这个问题，可以利用v-if的强制刷新。在数据有更新时先将updateFlag设为false,过100毫秒再设为true。

在这里插入图片描述

如此，基本上能保证正常显示所有的数据。但强制刷新会使得滚动进度刷新，从头开始滚。

看似很完美，但是坑在业务场景了，我们这边的数据刷新频率在10秒左右，也就意味着在我们的业务场景中只会看到前几条数据，因为每次数据更新，都会从头滚动。

基于此我放弃了该依赖的使用。

坑2： 使用scrollTop属性，找不到表格的bodyWrapper

看了好多文章，都说直接取用this.$refs.myTable.bodyWrapper，搁我这就直接报错，就找不着这个bodyWrapper。

实际实现步骤

主要实现逻辑使用的是操作表格体的滚动条，也就是坑2中找不到的bodyWrapper。

1. 找到要操作的dom节点

具体操作如上图，找到表格体的外层dom节点，有滚动条属性。然后点击右键将该节点显示在控制台上，修改该节点的scrollTop值，发现表格内容上移了，说明我们找对了节点。

接下来就是在代码中找到该节点，给表格加一个ref="tableData"，然后你可以打印一下this.$refs.tableData，手动找一下刚刚在控制台操作的那个元素，我的是this.$refs.tableData.$refs.bodyWrapperScrollbar.$refs.wrap，然后操作一下该元素的scrollTop属性，看是否能操作表格的滚动条，这里有一个坑：直接操作可能不会生效，需要一个定时器改动。

2. 控制该节点的scrollTop属性

整体代码如下：

在这里插入图片描述

封装了方法之后，在created或mounted调用该方法即可。

其中定时器中(1000 / 60) * 3是定时执行的时间，控制滚动的快慢，可以自定义时间。

除此之外还有个需求就是：鼠标移入表格区，暂停移动，鼠标移出表格区继续移动。

封装一个停止移动的方法，同时给表格增加方法：鼠标移入停止移动，出来之后继续移动。

在这里插入图片描述

除此之外，还有一个需求是：手动点击某一列的排序时，需要从头滚动，则需要一个参数scrollInitFlag，用来判断是否从头滚动，初始值为true，在排序方法中将该值设置为true，同时在autoScrollFn方法中增加逻辑，如下图：

在这里插入图片描述

完整代码如下：

// 表格自动滚动
    autoScrollFn() {
      clearInterval(this.scrollTimer);
      this.$nextTick(() => {
        const tBody =
          this.$refs.tableData.$refs.bodyWrapperScrollbar.$refs.wrap;
        // 当可视窗口高度大于表格高度时，不滚动
        if (tBody.clientHeight > tBody.scrollHeight) {
          return;
        }
        if (this.scrollInitFlag) {
          tBody.scrollTop = 0;
          this.scrollInitFlag = false;
        }
        this.scrollTimer = setInterval(() => {
          tBody.scrollTop += 1; // 每次上滑一个像素
          // 当滚动到最底部(可视高度+距离顶部=整个高度)时，从头开始滚
          if (tBody.clientHeight + tBody.scrollTop === tBody.scrollHeight) {
            tBody.scrollTop = 0;
          }
        }, (1000 / 60) * 3); // 1000 / 60
      });
    },
 
 
stopScrollFn() {
      clearInterval(this.scrollTimer);
      this.scrollTimer = null;
    },
 
 
// 排序
    sortChangeFn({ column, prop, order }) {
      console.log(column, prop, order);
      // 调用后端接口
      this.getDataFn();
      this.scrollInitFlag = true;
    },

做完之后发现文字滚动的时候会抖动，如果说没有这么频繁的刷新数据的话，建议还是要用vue-seamless-scroll 插件。以上就是功能需求的实现，如果对你有用的话别忘记留下一个赞哦。附上原文链接（尊重原创）：https://blog.csdn.net/catascdd/article/details/131923234#comments_31972969