vue+element 根据父容器动态设置table高度出滚动条_vue3 根据父容器设置高度

可以通过CSS样式来控制表格的高度，并使用JavaScript动态地设置这个高度。

HTML:

<template>
  <el-table
    :data="tableData"
    :height="tableHeight"
    style="width: 100%">
    <!-- 列配置 -->
  </el-table>
</template>

js:

<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ],
      tableHeight: '' // 初始高度
    };
  },
  mounted() {
    this.setTableHeight();
    window.addEventListener('resize', this.setTableHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setTableHeight);
  },
  methods: {
    setTableHeight() {
      const parentHeight = this.$el.parentNode.clientHeight; // 获取父容器高度
      this.tableHeight = parentHeight - 100 + 'px'; // 减去其他元素高度，保留一定空间
    }
  }
};
</script>

css:确保父级有高度:(父级是自适应%高度也可以,但是不能没有!!!)

<style scoped>
/* 确保父容器有高度 */
.el-table {
  width: 100%;
}
</style>

说明:在这个示例中，表格组件在被挂载后会计算其父元素的高度，并设置表格的height属性以适应父元素的高度。同时，它还会在浏览器窗口大小改变时重新计算并设置表格高度。需要注意的是，父元素的高度应该是可用的