tdesign坑之EnhancedTable树形结构默认展开所有行

发布于:2024-04-10 ⋅ 阅读:(213) ⋅ 点赞:(0)

⚠️在官方实例中,树形结构的表格提供了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);

缺点:等待接口请求数据赋值完之后再手动调用组件实例方法的话,在网络卡顿情况下会有明显的停滞感,用户体验不佳。

综上所述,采用第一种配置方法更合理些。


网站公告

今日签到

点亮在社区的每一天
去签到