element plus中el-table实现滑动鼠标滚轮表格横向滚动

在Element Plus中，要实现使用滑动鼠标滚轮控制el-table的横向滚动，你可以监听表格的滚动事件，并在事件处理函数中根据鼠标滚轮的滚动方向调整表格的滚动位置。

以下是一个简单的示例代码：

<template>
  <el-table
    :data="tableData"
    @wheel.native.prevent="handleWheel"
    style="overflow: auto;"
  >
    <el-table-column
      v-for="item in columns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
    ></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...数据
      ],
      columns: [
        // ...列配置
      ],
      scrollPosition: 0,
    };
  },
  methods: {
    handleWheel(event) {
      const table = this.$el.querySelector('.el-table__body-wrapper');
      const scrollLeft = table.scrollLeft;
      const maxScrollLeft = table.scrollWidth - table.clientWidth;
      const scrollStep = 10; // 滚动步长
 
      if (event.deltaY > 0) { // 向下滚动
        if (scrollLeft < maxScrollLeft) {
          this.scrollPosition += scrollStep;
          table.scrollLeft = this.scrollPosition;
        }
      } else { // 向上滚动
        if (scrollLeft > 0) {
          this.scrollPosition -= scrollStep;
          table.scrollLeft = this.scrollPosition;
        }
      }
    },
  },
};
</script>

在这个示例中，我们监听了表格(el-table)的原生滚轮事件(wheel)，并在handleWheel方法中处理滚动逻辑。根据滚轮的滚动方向，我们调整了表格的滚动位置。注意，我们使用了.native.prevent修饰符来直接监听原生事件，并阻止滚动默认行为。

请确保你的el-table有足够的内容来触发横向滚动，并且表格的父元素有确定的宽度。此外，滚动步长(scrollStep)可以根据需要调整。