el-table 动态添加列之后 表格超出

`el-table` 是 Element UI 中的一个表格组件，它允许你在运行时动态地添加、删除或修改列。当你在表格中动态添加新的列并希望保持其高度适应内容时，可能会遇到表格超出屏幕的问题。这是因为表格的高度默认是固定的，如果内容增加导致行数增多，超出部分可能会被隐藏。

解决这个问题通常有以下几种方式：

1. **虚拟滚动**（v-loading="virtual" 或者使用 element-ui 的虚拟滚动插件 `el-virtual-scroller`）：这可以提高性能并只渲染当前可见区域的数据，超出的部分不会占用额外的空间。

2. **设置高度自适应**：你可以通过监听数据变化，更新表格高度使其随内容调整。例如，你可以计算所有行的高度总和再加上表头行的高度作为表格容器的 height 属性。

<template>
  <div ref="tableWrapper" :style="{ height: getTableHeight() + 'px' }"></div>
</template>

<script>
export default {
  computed: {
    getTableHeight() {
      // 计算行高总和和表头高度
      const headerHeight = ...;
      const rowHeightsSum = ...;
      return headerHeight + rowHeightsSum;
    }
  },
  mounted() {
    this.updateTableHeight();
  },
  methods: {
    updateTableHeight() {
      this.$nextTick(() => {
        this.getTableHeight && this.$refs.tableWrapper.style.height = this.getTableHeight() + 'px';
      });
    },
    handleDataChange() {
      this.updateTableHeight();
    }
  }
}

3. **调整 CSS 样式**：你可以设置表格的 overflow 装饰属性（如 overflow-y: auto;），这样超出的内容会显示滚动条。

记得处理好数据加载和渲染的时机，以便在数据准备好后再展示完整的表格。同时，在