React 之antd Tree树形组件反显

近期做项目遇到一个需求:树形组件后端返回的数据包含父节点和子节点,但在子节点不全被选中的时候,不能把父节点给勾选上,否则会出现父节点被勾选,里边未被选中的子节点也全部被选中。

经过网上搜索,遇到一个很好的解决方案

1、const test = []; // 定义test 存放所有子节点的数组
2、循环遍历出最深层子节点(包含所有的子节点及没有子节点的父节点),存放在一个数组中

requestList = (data) => {
    data.map((item) => {
      if (item.children && item.children.length > 0) {
        this.requestList(item.children);
      } else {
        test.push(item.key);
      }
      return null;
    });
    return test;
  };

3、将后台返回的含有父节点的数组和第一步骤遍历的数组做比较,求交集

allArr:所有的树结构

functions:后端给的要展示的父子节点

const result = [...new Set(this.requestList(allArr))].filter((item) =>
      new Set(eval(functions)).has(item)
    );

4、 利用这个新的数组给Tree组件checkedKeys赋值

 

Antd是一款基于React框架的UI组件库,其中包括了树形组件。在实现增删改查的功能方面,Antd树形组件可以非常方便地应用。 首先,对于增加节点的功能,Antd树形组件提供了一个方法——onAdd,通过该方法可以添加一个新节点,例如: ``` onAdd = (parentId) => { const { treeData } = this.state; const parent = findNodeById(treeData, parentId); const newChild = { id: uuid(), title: 'New Node', children: [] }; parent.children.push(newChild); this.setState({ treeData }); } ``` 其次,对于删除节点的功能,Antd树形组件同样提供了一个方法——onRemove,通过该方法可以删除指定节点,例如: ``` onRemove = (nodeId) => { const { treeData } = this.state; const parent = findParentNode(treeData, nodeId); parent.children = parent.children.filter((child) => child.id !== nodeId); this.setState({ treeData }); } ``` 在实现修改节点的功能方面,Antd树形组件可以实现节点的编辑功能,可以通过双击节点文字来实现编辑。 最后,在实现查找节点的功能方面,Antd树形组件提供了相关的方法供开发人员使用,例如: ``` findNodeById(treeData, id) { for (let i = 0; i < treeData.length; i++) { const node = treeData[i]; if (node.id === id) { return node; } else if (node.children.length > 0) { const foundNode = this.findNodeById(node.children, id); if (foundNode) { return foundNode; } } } return null; } ``` 总的来说,借助Antd树形组件,实现增删改查的功能非常方便。实现这些功能的关键是要深入了解Antd树形组件的API,并结合业务需求进行开发。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值