el-table表格自动滚动

实现效果如下：

功能点：

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, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 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依赖吧