Vue elementUI el-table表格实现高度自适应

在Vue中使用elementUI的el-table组件实现高度自适应，可以通过设置CSS样式来实现。以下是一个简单的例子：

1. 确保你已经在项目中安装并引入了elementUI。
2. 在你的Vue组件中，使用el-table组件并设置样式以实现高度自适应。

<template>
  <el-table
    :data="tableData"
    style="width: 100%; height: 100%;"
    :max-height="tableHeight"
  >
    <!-- 你的表格列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 你的数据数组
      ],
      tableHeight: 0,
    };
  },
  mounted() {
    this.setTableHeight();
    window.addEventListener('resize', this.setTableHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setTableHeight);
  },
  methods: {
    setTableHeight() {
      this.tableHeight = this.$el.clientHeight - 100; // 假设你需要留出100px的空间
    },
  },
};
</script>
 
<style>
/* 确保父容器的高度是固定的 */
.your-container {
  height: 500px; /* 或者其他固定高度 */
}
</style>

在这个例子中，我们设置了el-table的max-height属性，而不是直接设置height，这样表格就可以在数据不足以填满指定高度时也能正常显示。我们还监听窗口的resize事件来动态更新表格的最大高度。

请注意，你需要根据实际情况调整.your-container的高度以及setTableHeight方法中的100值。此外，在实际的项目中，你可能需要更复杂的布局和样式来确保表格的高度能够适应不同的屏幕和容器大小。