element-ui el-table表格实时刷新数据和自动循环滚动指令插件

描述

• 此指令用于处理表格元素的自动滚动逻辑，支持设置滚动速度、时间间隔、开始/结束时间间隔。
• 当鼠标进入元素时，暂停滚动；离开时，根据配置恢复滚动。
• 定时或者其他方案实时刷新数据即可

---

一、效果

---

二、文件目录

---

三、El-Table插件文件

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

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

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-11
 * **/

// 检查值是否为有效数字的函数
function isNumber(value) {
  return typeof value === 'number' && !isNaN(value);
}

export default {
  // 绑定指令时的钩子函数
  bind(el, binding) {
    // 从绑定值中提取参数或使用默认值
    const time = isNumber(binding.value.time) ? binding.value.time : 60000; // 定时开始滚动的时间
    const speed = isNumber(binding.value.speed) ? binding.value.speed : 100; // 滚动速度
    const loop = (binding.value.loop !== undefined && binding.value.loop !== null) ? binding.value.loop : true; // 是否循环滚动
    const timeStart = isNumber(binding.value.timeStart) ? binding.value.timeStart : 0; // 开始等待时间
    const timeEnd = isNumber(binding.value.timeEnd) ? binding.value.timeEnd : 0; // 结束等待时间
    const step = 1; // 每次滚动的步长

    // 获取表格体容器
    const wrapper = el.querySelector('.el-table__body-wrapper');
    wrapper.__isExecute__ = false;

    // 自动滚动函数
    wrapper.__vueAutoScroll__ = () => {
      clearTimeout(wrapper.__animationTime__); // 清除之前的动画时间
      const scrollHeight = wrapper.scrollHeight;
      const clientHeight = wrapper.clientHeight;
      let scrollTop = wrapper.scrollTop;

      // 如果内容高度小于或等于容器高度，则停止滚动
      if (clientHeight >= scrollHeight) {
        return;
      }

      // 如果循环滚动并且在顶部时，设置开始等待时间
      if (loop && wrapper.__isExecute__ && scrollTop === 0) {
        if (timeStart === 0) {
          wrapper.__isExecute__ = false;
          wrapper.__vueAutoScroll__()
        } else {
          wrapper.__startTime__ = setTimeout(() => {
            wrapper.__vueAutoScroll__()
            wrapper.__isExecute__ = false;
          }, timeStart)
        }
        return;
      }

      // 如果滚动到底部，设置结束等待时间
      if (clientHeight + scrollTop >= scrollHeight) {
        if (loop) {
          if (timeEnd === 0) {
            wrapper.__isExecute__ = true;
            wrapper.scrollTop = 0;
            wrapper.__vueAutoScroll__()
          } else {
            wrapper.__endTime__ = setTimeout(() => {
              wrapper.__isExecute__ = true;
              wrapper.scrollTop = 0;
              wrapper.__vueAutoScroll__()
            }, timeEnd)
          }
        }
        return;
      }

      // 如果未到达底部，继续滚动
      if (scrollTop < scrollHeight) {
        scrollTop += step;
        wrapper.scrollTop = scrollTop;
        wrapper.__animationTime__ = setTimeout(() => requestAnimationFrame(wrapper.__vueAutoScroll__), speed);
      }
    };

    // 停止滚动函数，清除所有定时器
    wrapper.__stopScroll__ = () => {
      clearTimeout(wrapper.__animationTime__);
      clearTimeout(wrapper.__mouseleaveTime__);
      clearTimeout(wrapper.__startTime__);
      clearTimeout(wrapper.__endTime__);
    };

    // 开始滚动函数
    wrapper.__startScroll__ = () => {
      wrapper.__mouseleaveTime__ = setTimeout(() => {
        wrapper.__vueAutoScroll__();
      }, time);
    };

    // 添加鼠标事件监听器
    wrapper.addEventListener('mouseenter', wrapper.__stopScroll__);
    wrapper.addEventListener('mouseleave', wrapper.__startScroll__);

    // 初始启动滚动
    wrapper.__startScroll__();
  },
  // 解绑指令时的钩子函数
  unbind(el) {
    // 清除所有定时器和事件监听器
    const wrapper = el.querySelector('.el-table__body-wrapper');
    clearTimeout(wrapper.__animationTime__);
    clearTimeout(wrapper.__mouseleaveTime__);
    clearTimeout(wrapper.__startTime__);
    clearTimeout(wrapper.__endTime__);
    wrapper.removeEventListener('mouseenter', wrapper.__stopScroll__);
    wrapper.removeEventListener('mouseleave', wrapper.__startScroll__);
  }
};

四、使用

1.局部注册指令

<template>
  <div>
    <el-table v-elTableAutoScroll="{ time: 1000, speed: 200, loop: 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-11
 * 
 * 参数:
 * - time: 自动滚动开始前的延迟时间（毫秒）。
 * - speed: 滚动的速度（毫秒，可能表示每次滚动的时间间隔）。
 * - loop: 是否在到达底部后重新滚动到顶部。
 * - timeStart: 当滚动到顶部时，再次开始滚动前的等待时间（毫秒）。
 * - timeEnd: 当滚动到底部时，再次开始滚动前的等待时间（毫秒）。
 */
  data() {
    return {
      autoScrollbar: {
        time: 1000 * 10,
        speed: 100,
        loop: true,
        timeStart: 1000 * 3,
        timeEnd: 1000 * 5,
      },
    }
  },

<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–专注于分享有趣的技术 解决难题