el-table的横向滚动拖拽

el-table实现鼠标横向拖拽滚动和滚轴滚动

1. 封装方法，这是vue2写法，主要是传一个el-table 的一个ref，相关的逻辑在该函数内

   函数功能：

   • 监听鼠标滚轮事件,实现横向滚动
   • 不能选中文字
   • 添加鼠标左键长按事件,实现横向拖拽

/**
 * 为 element-ui 表格添加横向滚动和拖拽功能
 * @param {Object} tableRef - 表格的 Vue ref 对象
 */
export function initTableScroll(tableRef) {
  if (!tableRef || !tableRef.$el) {
    console.warn('tableRef 无效');
    return;
  }

  const tableEl = tableRef.$el;
  const bodyWrapper = tableRef.bodyWrapper;

  // 监听鼠标滚轮事件,实现横向滚动
  tableEl.addEventListener('mousewheel', (e) => {
    e.preventDefault(); // 阻止默认的垂直滚动
    const delta = e.wheelDelta || -e.detail;
    // console.log(delta);

    bodyWrapper.scrollLeft -= delta;

  }, { passive: false });
  // 不能选中文字
  tableEl.addEventListener('selectstart', (e) => {
    e.preventDefault();
  });
  // 添加鼠标左键长按事件,实现横向拖拽
  tableEl.addEventListener('mousedown', (e) => {
    console.log(e);

    if (e.button === 0) {
      const startX = e.clientX;
      const startScrollLeft = bodyWrapper.scrollLeft;

      const handleMouseMove = (e) => {
        const dx = e.clientX - startX;
        bodyWrapper.scrollLeft = startScrollLeft - dx;
      };

      const handleMouseUp = () => {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      };

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    }
  });
}

2.使用示例：

//table.vue
//html
 <el-table
      ref="elTableRef"
   、、、、、
    >
  data() {
    return {
      elTableRef: null,
    };
  },

 mounted(){
 initTableScroll(this.$refs.elTableRef);
 }

vue3的写法照着上面的修改一下就行