vue3设置两个el-table上下拼接合成一个展示且横向滚动条联动

在Vue3中，你可以通过将两个`<el-table>`组件分别放在不同的`<div>`容器里，并利用CSS的布局属性以及`v-for`循环来实现这两个表格的上下拼接。同时，为了让横向滚动条联动，你需要确保两个表格的宽度一致。下面是一个简单的示例：

首先，在HTML结构上创建两个`<div>`：

<div class="table-wrap" ref="tableWrap1">
  <el-table :data="tableData1" style="width: 100%;"></el-table>
</div>
<div class="table-wrap" ref="tableWrap2">
  <el-table :data="tableData2" style="width: 100%;"></el-table>
</div>

然后，给`.table-wrap`添加CSS样式，让它们高度相加并设置水平滚动：

.table-wrap {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

/* 如果需要，可以设置固定高度，例如 */
.table-wrap {
  height: calc(50% + 10px); /* 表格高度自适应，这里假设每个表格占总高度的一半 */
}

接下来，在Vue实例中，你需要管理`tableData1`和`tableData2`的数据，确保它们能正确渲染。

最后，为了实现滚动条联动，当其中一个`<table>`的滚动条移动时，其他表格的滚动位置也需要更新。这可以通过监听滚动事件并在内部处理计算另一个表格的新位置来完成。这里提供一个简化版本的JavaScript部分：

export default {
  setup() {
    const tableWrap1 = this.$refs.tableWrap1;
    const tableWrap2 = this.$refs.tableWrap2;

    // 假设scrollLeft是滚动条的位置
    function updateScrollPosition(scrollLeft) {
      tableWrap2.style.scrollLeft = scrollLeft; // 联动滚动
    }

    tableWrap1.addEventListener('scroll', () => {
      updateScrollPosition(tableWrap1.scrollLeft);
    });

    return { tableData1, tableData2 };
  },
};