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

Question

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

Answer 1

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

具体实现方法如下：

1. 在模板中添加一个包裹树形表格的容器，并设置 max-height 和 overflow 属性：

<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 为表头高度 */
}

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