在antd 树形控件中,为我们提供了loadData属性进行异步加载。但使用时会发现所有层级不管是否存在children,在最开始都默认会有下拉框,再点击一次没有children的层级的展开按钮后,展开按钮才会消除。
通过文档可知我们需要自己添加属性去设置叶子节点,使用递归就能很好的解决这个问题。
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)}
/>