el-table的树形表格怎么实现流体高度?max-height不管用

普通表格(非树形表格),根据官方文档,添加max-height属性可以实现超出定义的高度就有一个滚动条,但是树形表格就实现不了;
请问Element-UI树形表格怎么实现类似的效果呢?

Element-UI 树形表格也可以通过设置 max-height 属性来实现滚动条效果。不过,需要注意的是,树形表格的高度是根据数据的层级关系动态计算的,因此需要通过 JavaScript 动态计算表格的高度。

具体实现方法如下:

  1. 在模板中添加一个包裹树形表格的容器,并设置 max-heightoverflow 属性:
<div class="tree-table-container" style="max-height: 400px; overflow: auto;">
  <el-table :data="tableData" :tree-props="{ children: 'children' }">
    <!-- 表格列定义 -->
  </el-table>
</div>
  1. 在 JavaScript 中动态计算表格的高度,并将其设置为容器的高度:
export default {
  data() {
    return {
      tableData: [], // 树形表格数据
      containerHeight: 0 // 容器高度
    }
  },
  mounted() {
    // 计算容器高度
    this.containerHeight = document.querySelector('.tree-table-container').offsetHeight;
  }
}
  1. 在样式中设置表格的最大高度为容器高度减去表头高度:
.el-table__body-wrapper {
  max-height: calc(100% - 48px); /* 48px 为表头高度 */
}

这样就可以实现树形表格的滚动条效果了。需要注意的是,如果树形表格的数据过多,可能会影响页面性能,因此建议在数据量较大时使用分页等方式进行优化。