两个el-table切换 高度不一样

当在Vue.js应用中使用Element UI库的`el-table`组件时，如果需要展示两个表格并且它们的高度不同时，可能会遇到一些布局挑战。这是因为每个`el-table`默认会根据其内容高度自动调整，所以高度取决于数据量、列宽以及行内元素的内容。

解决这个问题的一种常见做法是：

1. **手动设置高度**：为每个表格指定一个固定的固定高度，通过CSS控制。例如，你可以给每个表格添加一个`.table-height`的类，并设置`height: auto; min-height: Xpx;`，其中X是期望的高度值。

.table-height {
  height: auto;
  min-height: 300px; /* 可视化示例高度，实际根据需求设定 */
}

2. **动态计算高度**：如果你希望根据内容自动调整，可以监听表格的数据变化，然后更新对应的表格高度。这通常需要配合Vue的`v-once`指令或者`ref`属性来获取表格DOM节点，然后动态设置`style`属性。

<template>
  <el-table ref="table1" class="table-height" :data="tableData1" @load="onTableLoad">
    <!-- 表格1的配置 -->
  </el-table>

  <el-table ref="table2" class="table-height" :data="tableData2" @load="onTableLoad">
    <!-- 表格2的配置 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [], // 数据1
      tableData2: []   // 数据2
    };
  },
  methods: {
    onTableLoad({ instance }) {
      const container = this.$refs['table' + instance.$index]; // 获取当前表格的容器
      if (container) {
        container.style.minHeight = 'auto'; // 清除默认限制
        container.style.height = `${instance.$el.scrollHeight}px`; // 设置高度等于内容高度
      }
    }
  }
};
</script>

在这个例子中，`onTableLoad`方法会在表格加载完成后被触发，动态更新表格的高度。