Antd Tree递归查找叶子节点

254 阅读1分钟

在antd 树形控件中,为我们提供了loadData属性进行异步加载。但使用时会发现所有层级不管是否存在children,在最开始都默认会有下拉框,再点击一次没有children的层级的展开按钮后,展开按钮才会消除。

image.png

通过文档可知我们需要自己添加属性去设置叶子节点,使用递归就能很好的解决这个问题。

const setLeafNode = (data: DataNode[] | undefined): DataNode[] => {
  if (!data) return [];
  
  return data.map((item) => {
    if (!item.children || item.children.length === 0) {
      return {
        ...item,
        isLeaf: true,
      };
    }
    return {
      ...item,
      children: setLeafNode(item.children),
    };
  });
};

用这个递归对treeData进行一次包裹就能找出树里面所有的叶子节点了

          <Tree
            ...
            treeData={setLeafNode(treeValue)}
          />