首页 前端知识 Ant Design Tree defaultExpandAll设置无效无法实现展开所有树节点,获取各节点下的末位子节点的key,再通过expandedKeys实现展开所有树节点

Ant Design Tree defaultExpandAll设置无效无法实现展开所有树节点,获取各节点下的末位子节点的key,再通过expandedKeys实现展开所有树节点

2024-09-06 00:09:26 前端知识 前端哥 927 791 我要收藏

项目场景:

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


问题描述

在API文档中可以看到defaultExpandAll属性可以设置默认展开所有树节点,但是在使用时发现,无法实现全部节点展开。
在这里插入图片描述


原因分析:

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]);
  };

⚠️这里用了递归实现

递归:就是函数的自我调用,通过这种方式,将问题分解成更小的版本的相同问题,从而解决问题。可以对复杂数组进行处理,例如数组嵌套数组,对象嵌套对象,或者更深层的嵌套关系。

这里使用递归而不是循环是因为我们不确定tree嵌套数据会有几层,不知道要遍历几层,递归比循环更加强大的地方在于,递归函数维持着一个保存每次递归调用当前状态的栈,允许函数获得子问题的结果后继续处理,使代码更简洁。

还有一点要注意:
由于递归维持当前状态栈,所以在递归函数中 setExpandKeys:any = expandKey, 保留之前存储的数据。

以上只是简单的记录,有什么表达不明确或者不合理之处,还望指教,希望对你有所帮助

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17742.html
标签
评论
发布的文章

jquery video视频轮播播放

2024-09-27 09:09:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!