自定义指令实现el-table鼠标滚轮横向滚动表格功能(适用于Element Plus)

import type { Directive } from "vue";
/**
 * v-wheelhorizontalScroll
 * 鼠标滚轮横向滚动表格指令
 */

// 获取El-table滚动区域Dom
const getTableScrollbarDom = (el: HTMLElement) => {
  (el as any).tableScrollDom = el.querySelector(
    ".el-table__body-wrapper .el-scrollbar__wrap"
  );
  const { tableScrollDom } = el as any;
  if (tableScrollDom) {
    tableScrollDom.addEventListener("wheel", scrollX);
  }
};

const scrollX = (e: any) => {
  const tableScrollDom = e.currentTarget;
  const { offsetWidth, scrollWidth } = tableScrollDom as HTMLElement;
  if (scrollWidth > offsetWidth) {
  	e.preventDefault();
    e.currentTarget.scrollLeft += e.deltaY;
  }
};

const vWheelhorizontalScroll: Directive = {
  updated(el: HTMLElement) {
    getTableScrollbarDom(el);
  },
  beforeUnmount(el: HTMLElement) {
    const { tableScrollDom } = el as any;
    if (tableScrollDom) {
      tableScrollDom.removeEventListener("wheel", scrollX);
      delete (el as any).tableScrollDom;
    }
  },
};

export default vWheelhorizontalScroll;