element-ui el-table表格自动循环滚动指令插件

描述

• 此指令用于处理表格元素的自动滚动逻辑，支持设置滚动速度、时间间隔、循环滚动和时间循环。
• 当鼠标进入元素时，暂停滚动；离开时，根据配置恢复滚动。
• 数据实时加载数据可滚动方案：https://blog.csdn.net/LWuXin/article/details/140337343

---

一、效果

---

二、文件目录

---

三、El-Table插件文件

在 el-table-autoScrollbar 目录下创建一下文件
index.js文件.

/**
 * PS: Waseem 
 * URL: blog.waseem.cn
 * Data: 2024-07-02
 * **/

import scroll from './scroll'

const install = function (Vue) {
  Vue.directive('el-table-auto-scroll', scroll)
}

if (window.Vue) {
  window['el-table-auto-scroll'] = scroll
  Vue.use(install);
}

scroll.install = install
export default scroll

scroll.js文件.

/**
 * PS: Waseem
 * URL: blog.waseem.cn
 * Data: 2024-07-02
 * **/

export default {
  bind(el, binding, vnode) {
    const time = binding.value.time || (1000 * 60);
    let speed = binding.value.speed || (1000 * 60);
    const loop = binding.value.loop || false;
    const timeLoop = binding.value.timeLoop || false;

    const wrapper = el.querySelector('.el-table__body-wrapper');
    wrapper.__isExecute__ = false;
    wrapper.__vueAutoScroll__ = () => {
      if (wrapper.clientHeight >= wrapper.scrollHeight) {
        return;
      }
      clearInterval(wrapper.__vueScrollTimeout__);
      wrapper.__vueScrollTimeout__ = setInterval(() => {
        if (timeLoop && wrapper.__isExecute__) {
          wrapper.scrollTop = 0;
        }

        clearInterval(wrapper.__vueScrollInterval__);
        wrapper.__vueScrollInterval__ = setInterval(() => {
          wrapper.__isExecute__ = false;
          wrapper.scrollTop += 1;
          if (wrapper.clientHeight + wrapper.scrollTop === wrapper.scrollHeight) {
            if (loop) wrapper.scrollTop = 0;
            else {
              clearInterval(wrapper.__vueScrollInterval__)
            }
            wrapper.__isExecute__ = true;
            if (timeLoop && wrapper.__isExecute__) {
              clearInterval(wrapper.__vueScrollInterval__)
              // 如需立即开始请注释以下两段代码
              clearInterval(wrapper.__vueScrollTimeout__);
              wrapper.__vueAutoScroll__();
            }
          }
        }, speed / wrapper.scrollHeight);


      }, time);
    };
    wrapper.addEventListener('mouseenter', () => {
      clearInterval(wrapper.__vueScrollInterval__)
      clearInterval(wrapper.__vueScrollTimeout__);
    });
    wrapper.addEventListener('mouseleave', wrapper.__vueAutoScroll__);
  },
  componentUpdated(el, binding, vnode) {
    const wrapper = el.querySelector('.el-table__body-wrapper');
    wrapper.__vueAutoScroll__();
  },
  unbind(el, binding, vnode) {
    const wrapper = el.querySelector('.el-table__body-wrapper');
    clearInterval(wrapper.__vueScrollInterval__);
    clearInterval(wrapper.__vueScrollTimeout__);
    wrapper.removeEventListener('mouseenter', () => {
      clearInterval(wrapper.__vueScrollInterval__)
      clearInterval(wrapper.__vueScrollTimeout__);
    });
    wrapper.removeEventListener('mouseleave', wrapper.__vueAutoScroll__);
  }
}

四、使用

1.局部注册指令

<template>
  <div>
    <el-table v-elTableAutoScroll="{ time: 60000, speed: 100, loop: true, timeLoop: true }">
      <!-- 表格内容 -->
    </el-table>
  </div>
</template>

<script>
import elTableAutoScrollbar from '../utils/directive/el-table-autoScrollbar';

export default {
  directives: {
    elTableAutoScroll: elTableAutoScrollbar
  }
};
</script>

2.全局注册指令 main.js下添加此代码

import elTableAutoScrollbar from "../src/utils/directive/el-table-autoScrollbar";

// 全局注册指令
Vue.directive('elTableAutoScroll', elTableAutoScrollbar);

---

五、例子

/**
 * Vue 自动滚动指令
 * @author Waseem
 * @date 2024-07-02
 * 
 * 参数:
 * - time: 滚动间隔，默认值为 1 分钟（1000 * 60 毫秒）
 * - speed: 每次滚动的速度，默认值为 （1000 * 60 毫秒）
 * - loop: 是否循环滚动，当滚动到底部时回到顶部，默认关闭
 * - timeLoop: 是否启用时间循环，即使已经滚动到底部，每隔一定时间重新开始，默认关闭
 */
  data() {
    return {
      autoScrollbar: {
        time: 1000 * 60,
        speed: 1000 * 60,
        loop: false,
        timeLoop: true,
      },
    }
  },

<el-table :data="tableData" style="width: 100%;" height="100%" v-el-table-auto-scroll="autoScrollbar">
   <el-table-column prop="name" label="名称" min-width="150"></el-table-column>
 </el-table>

---

BLOG: Waseem BLOG–专注于分享有趣的技术 解决难题