我在编辑树节点example1时,可以修改example1的上级类别,类别不能为当前选中的example1,因为自己不能是自己的上级节点,所以,TreeSelect限制除了自己以外其他节点可以选,当前节点无法选择。
单个TreeSelect节点配置
const renderAddTree = (data: any) =>
data?.length > 0 && data.map((item: any) => {
if (item?.children?.length > 0) {
// 编辑限制除了自己以外其他分类可以选,自己不能选
return (
<TreeNode
key={item.id}
title={item.name}
value={item.id}
//核心代码
disabled={type === 'edit' && item.id === currentItem.id ? true : false}
>
{renderAddTree(item.children)}
</TreeNode>
);
}
return <TreeNode
{...item}
key={item.id}
title={item.name}
value={item.id}
disabled={type === 'edit' && item.id === currentItem.id ? true : false}
/>;
});
TreeSelect渲染
<Form.Item
label="类别"
name="parentId"
rules={[
{
required: true,
message: '请选择类别',
},
]}
>
<TreeSelect
showSearch
style={{ width: '100%' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="请选择类别"
allowClear
treeDefaultExpandAll
onChange={(value, label,) => onUpChange(value, label,)}
>
{renderAddTree(treeList || [])}
</TreeSelect>
</Form.Item>