⚠️在官方实例中,树形结构的表格提供了2种方法控制展开全部节点:
一是通过配置属性tree.defaultExpandAll为true代表默认展开全部节点(仅默认情况有效);
二是使用组件实例方法expandAll()可以自由控制树形结构的展开;
(1)第一种方法需要注意的是仅初始化数据的时候有效,在以下场景中使用无效:
已为EnhancedTable组件配置了defaultExpandAll为true,在onMounted页面元素挂载完数据之后给表格数据data赋值,
<ZnEnhanceTable
ref="tableRef"
row-key="id"
:data="tableData"
:columns="tableColumns"
:tree="{
defaultExpandAll: true, // 默认展开所有节点
}"
:tree-expand-and-fold-icon="treeExpandAndFoldIconRender"
>
但此时树形结构仍是收起状态:
由于该属性仅初始化数据的时候有效,而在onMounted生命周期中组件实例已挂载完毕,初始化数据是空数组:[],无数据可展开,等待接口请求完毕后再赋值视图不再刷新,所以页面展示节点仍是收起状态。(验证:在onBeforeMount生命周期中做数据赋值能展开所有行,在onMounted生命周期中则无效)
解决方案:给组件绑定动态key值,这样就算接口数据请求回来也会重新渲染树结构,初始化数据。
<ZnEnhanceTable
ref="tableRef"
row-key="id"
:key="tableData.length"
:data="tableData"
:columns="tableColumns"
:tree="{
defaultExpandAll: true, // 默认展开所有节点
}"
:tree-expand-and-fold-icon="treeExpandAndFoldIconRender"
>
(2)第二种方法需要注意的是在接口数据请求回来后存在异步问题,直接调用组件实例方法expandAll()控制树形结构的展开有可能会失效。
解决方案:利用延时函数,在事件循环中会把延时队列中的方法放在微任务之后执行。
setTimeout(async () => {
await tableRef.value.expandAll();
}, 0);
缺点:等待接口请求数据赋值完之后再手动调用组件实例方法的话,在网络卡顿情况下会有明显的停滞感,用户体验不佳。
综上所述,采用第一种配置方法更合理些。