普通表格(非树形表格),根据官方文档,添加max-height属性可以实现超出定义的高度就有一个滚动条,但是树形表格就实现不了;
请问Element-UI树形表格怎么实现类似的效果呢?
Element-UI 树形表格也可以通过设置 max-height
属性来实现滚动条效果。不过,需要注意的是,树形表格的高度是根据数据的层级关系动态计算的,因此需要通过 JavaScript 动态计算表格的高度。
具体实现方法如下:
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>
export default {
data() {
return {
tableData: [], // 树形表格数据
containerHeight: 0 // 容器高度
}
},
mounted() {
// 计算容器高度
this.containerHeight = document.querySelector('.tree-table-container').offsetHeight;
}
}
.el-table__body-wrapper {
max-height: calc(100% - 48px); /* 48px 为表头高度 */
}
这样就可以实现树形表格的滚动条效果了。需要注意的是,如果树形表格的数据过多,可能会影响页面性能,因此建议在数据量较大时使用分页等方式进行优化。