Vue2自定义指令 实现el-table自动滚动

公司大屏table需要实现table自动滚动鼠标悬停效果，写了一个自定义指令来实现。

注册一个全局自定义指令

创建一个自定义指令文件

directives/autoScroll.js

const autoScroll = {
  inserted(el, binding) {
    // 获取实际的滚动容器（兼容element-ui表格等组件）
    const getScrollContainer = () => {
      // 如果绑定的是表格组件，尝试获取内部滚动容器
      return (
        el.querySelector(".el-table__body-wrapper") ||
        el.querySelector(".body-wrapper") ||
        el
      ); // 默认使用元素本身
    };

    const container = getScrollContainer();
    if (!container) return;

    const speed = binding.value?.speed || 1; // 默认滚动速度（像素/次）
    const interval = binding.value?.interval || 100; // 默认间隔时间（毫秒）
    const scrollBack = binding.value?.scrollBack !== false; // 是否循环滚动

    // 定义滚动函数
    const scrollFn = () => {
      container.scrollTop += speed;

      if (
        container.clientHeight + container.scrollTop >=
        container.scrollHeight
      ) {
        if (scrollBack) {
          container.scrollTop = 0;
        } else {
          clearInterval(container._autoScrollTimer);
        }
      }
    };

    // 存储timer
    container._autoScrollTimer = setInterval(scrollFn, interval);

    // 存储事件处理函数以便移除
    container._handleMouseEnter = () => {
      clearInterval(container._autoScrollTimer);
    };

    container._handleMouseLeave = () => {
      container._autoScrollTimer = setInterval(scrollFn, interval);
    };

    // 添加事件监听
    container.addEventListener("mouseenter", container._handleMouseEnter);
    container.addEventListener("mouseleave", container._handleMouseLeave);
  },

  unbind(container) {
    // 清除定时器
    clearInterval(container._autoScrollTimer);

    // 移除事件监听（需要传递相同的函数引用）
    if (container._handleMouseEnter) {
      container.removeEventListener("mouseenter", container._handleMouseEnter);
    }
    if (container._handleMouseLeave) {
      container.removeEventListener("mouseleave", container._handleMouseLeave);
    }

    // 清理自定义属性
    delete container._autoScrollTimer;
    delete container._handleMouseEnter;
    delete container._handleMouseLeave;
  },
};

export default autoScroll;

创建一个管理自定义指令的文件

directives/index.js

// 自定义指令
import autoScroll from "@/directives/autoScroll";

const directives = {
  autoScroll,
};

export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};

在main.js中引入调用

// 全局自定义指令
import Directives from "@/directives";
Vue.use(Directives);

在页面上使用即可

<el-table
  v-autoScroll
  :data="tableData"
>
  <el-table-column
      v-for="(item, index) in tableColumnList"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      :width="item.width ? item.width : 'auto'"
  ></el-table-column>
</el-table>

<!-- 或带参数 -->
<el-table v-autoScroll="{ speed: 2, interval: 50 }">
</el-table>