antd design TreeSelect 改造

最新推荐文章于 2024-09-07 16:06:50 发布

junner443

最新推荐文章于 2024-09-07 16:06:50 发布

阅读量1.1k

点赞数 1

文章标签：经验分享

本文链接：https://blog.csdn.net/junner443/article/details/128561951

版权

本文分享了如何改造antd design的TreeSelect组件，以支持单击、双击、三击复选框对应不同选择状态的功能。改造思路包括设置treeCheckStrictly属性以实现父子节点不联动，并通过onChange事件手动控制选中状态，利用递归算法处理节点选择逻辑。

摘要由CSDN通过智能技术生成

antd design TreeSelect 改造

1.背景

对于部门树组件，需要支持三种操作: 点击一次复选框，表示选中当前节点及该节点下的所有子节点；点击二次，表示选中当前节点；点击三次，表示不选中当前节点

2.现状

目前常见的操作：

1.点击复选框时，选中当前节点及该节点下的所有子节点；

2.取消复选框，取消当前节点及该节点下的所有子节点;

3.改造思路

首先把复选框改为不受控，即父节点和子节点不联动。通过treeCheckStrictly属性。通过onChange事件，去手动控制选中的节点。

下面的代码片段，使用了递归算法，找出当前点击的父节点下，没有被选中的子节点及所有子节点

 // 获取没有被选中的子节点
  getChildNodeType = (children, value, noSelectedChildNode=[], allChildNode=[]) => {
    children.forEach((item)=> {
      const index = value.findIndex(obj => obj.value === item.props.id)
      // 没有选中则添加到没有选中的数组中
      index === -1 && (noSelectedChildNode.push({label: item.props.name, value: item.props.id}))