ant design表格树形数据展示默认展开

转载

墨色天香 2024-11-04 06:39:07

文章标签 javascript 前端开发语言 typescript echarts 文章分类 架构后端开发

项目场景：

最近在使用Ant Design的 Tree 树形控件做树形数据展示，要求全部节点展示

问题描述

在API文档中可以看到defaultExpandAll属性可以设置默认展开所有树节点，但是在使用时发现，无法实现全部节点展开。

ant design表格树形数据展示默认展开_javascript

原因分析：

1、开始考虑觉得可能是expandedKeys （受控）展开指定的树节点与defaultExpandAll冲突导致；
2、避免1存在的情况测试，发现依旧无法展开全部节点，百度查看说defaultExpandAll在异步加载数据时不生效（default前缀属性只有在初始化时生效，因为异步加载数据时defaultExpandAll已经执行完成）

解决方案：

提示：可以通过受控expandedKeys或者在数据加载完成后渲染Tree来实现全部展开

我这边是使用同事封装的功用树组件，不好变更组件，就选择通过expandedKeys来控制Tree来实现全部展开。

原理：获取各节点下的末位子节点的key(这里就是你给树节点的唯一标识)，再通过expandedKeys实现

部分代码段：

/*
  * 初始化树形数据展开项回调事件
  * @param treeData 接口获取的tree数据
  * @returns {*}
  * const [expandKey, setExpandKey] = useState<any>([]);
  */
  const mapTreeData = (treeData) => {
    const setExpandKeys:any = expandKey;
  
    treeData.forEach(child => {
      if (child.children && child.children.length > 0) {
        mapTreeData(child.children);
      }
      setExpandKeys.push(child?.id);
    });
    setExpandKey([...setExpandKeys]);
  };