vue3 element-table实现左右两个表格左右滑动时一起联动

在Vue 3中，要实现两个表格（A和B）左右滑动时一起联动，可以通过监听表格A的滚动事件，然后同步更新表格B的滚动位置。以下是一个简单的示例：

<template>
  <div class="container">
    <div class="table-container">
      <el-table
        :data="tableAData"
        class="table-a"
        @scroll="handleTableAScroll"
      >
        <!-- 表格列定义 -->
      </el-table>
    </div>
    <div class="table-container">
      <el-table
        :data="tableBData"
        class="table-b"
        ref="tableB"
      >
        <!-- 表格列定义 -->
      </el-table>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
 
const tableAData = ref([]); // 表格A的数据
const tableBData = ref([]); // 表格B的数据
 
// 表格A滚动事件处理函数
const handleTableAScroll = (event) => {
  const tableB = event.target.closest('.table-container').nextElementSibling.querySelector('.table-b');
  tableB.scrollLeft = event.target.scrollLeft;
};
 
// 初始化数据
tableAData.value = new Array(100).fill(null).map((_, index) => ({ id: index, label: `Row ${index}` }));
tableBData.value = tableAData.value;
</script>
 
<style>
.container {
  display: flex;
}
 
.table-container {
  flex: 1;
  overflow: auto;
}
 
.table-a, .table-b {
  width: 100%;
  display: block;
}
</style>

在这个例子中，我们有两个表格容器（.table-container），每个容器内有一个表格（.table-a 和 .table-b）。我们监听表格A的滚动事件，当它滚动时，我们通过查询DOM找到表格B，并设置它的scrollLeft属性与表格A的当前滚动位置同步。

请确保Element Plus库已正确安装并导入到项目中，以使用<el-table>组件。