vue设置el-table高度为el-descriptions内容的高度

在Vue中，如果你想让`<el-table>`的高度自适应其内部`<el-description>`的内容高度，可以采用动态计算或者事件监听的方式来实现。这里提供一种常见的做法：

首先，在模板中绑定`v-if`或者`v-show`条件，只显示表头部分，而将实际表格内容隐藏，直到获取到`el-descriptions`高度后再渲染：

<template>
  <div ref="tableWrapper">
    <!-- 表头部分 -->
    <el-table :height="descriptionHeight" ref="table" v-if="!isContentLoaded">
      <el-table-column />
      <!-- ...其他列... -->
    </el-table>

    <!-- 描述区域，用于获取高度 -->
    <el-descriptions ref="descriptions" v-show="isContentLoaded"></el-descriptions>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isContentLoaded: false,
      descriptionHeight: 0, // 初始值设为0
    };
  },
  mounted() {
    this.fetchDescriptionHeight();
  },
  methods: {
    fetchDescriptionHeight() {
      this.$nextTick(() => {
        const descriptionsRef = this.$refs.descriptions;
        if (descriptionsRef && descriptionsRef.$el) {
          this.descriptionHeight = descriptionsRef.$el.offsetHeight; // 获取描述区高度
          this.isContentLoaded = true; // 设置已加载完成标志
          // 现在你可以更新el-table的高度了
          this.$refs.table.setHeight(this.descriptionHeight);
        } else {
          setTimeout(this.fetchDescriptionHeight, 50); // 如果还没加载完，稍后再试
        }
      });
    },
  },
};
</script>