使用antd的Tree树形控件，子节点没有勾选完全的情况下拿到父节点的值

最新推荐文章于 2025-06-20 10:50:30 发布
原创 最新推荐文章于 2025-06-20 10:50:30 发布 · 2.2w 阅读 · 23 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用 Ant Design 的 Tree 组件处理全选与半选状态。当子节点未完全选中时，父节点将处于半选状态。通过使用 onCheck 方法并合并 checkedKeys 和 halfCheckedKeys 数组，可以实现特定的需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在项目中，需要提交一个树形结构的菜单到后台。

 我需要把 0-0-0  0-0-0-0 0-0-0-1三个提交出去。但是antd组件中

 文档中说到，只有在子节点全部勾选的情况下，父节点才能被勾选。

解决办法：

 Tree组件提供的onCheck方法中带了两个参数，其中info这个参数中有一个叫做halfCheckedKeys的数组，它专门存贮的半勾选状态的节点（比如子节点没有勾选完全时，父节点就会被存储到这里）。把勾选的节点checkedKeys和半勾选节点halfCheckedKeys合并到一起，就符合我的需求。

 

www.woke20.com

vue3+ant design vue 实现Tree树形控件带搜索库并可关键字搜索筛选功能，Antd组件库a-tree可搜索的树展示搜索结果并展开（根据关键字搜索过滤tree树列表数据，详细示例代码）
高级前端工程师
05-08 4907
Vue3 AntDesign可搜索的树（只展示搜索结果并展开）vue3+antd使用andt-tree实现可搜索的tree_antd选择树搜索，vue3项目Antd 实现Tree树形控件带搜索功能，支持搜索展开tree，antd-tree组件带搜索框，Ant Design Vue3组件Tree树形控件，Tree组件实现可搜索的树，ant.design组件库中的Tree组件实现可搜索的树，树控件的搜索功能，antd Tree 组件 带搜索，动态list数据，tree嵌套数据，搜索后关键字标红，具备搜索功能的树
vue-antd 树形控件全选与全不选
weixin_50572740的博客
04-18 3941
<a-button type="primary" @click="allCheck">{{allCheckFlag ? "全不选" : "全选"}}</a-button> <div class="tree-box"> <a-tree v-model="checkedKeys" checkable :defaultExpandAll="true" :tree-data="treeData" :replaceFields="repla...
antd树型选择控件选择父级_[antd of vue] a-tree组件子节点不完全勾选获取父节点的值...
weixin_39729840的博客
12-19 2294
于是我参考着改了一点点,记录一下,写得不好,仅供参考, 见谅~showLinecheckable@check="onBusinessSelectChange":treeData='businessData':checkedKeys="businessSelectedRowKeys":autoExpandParent="true">---------------data中-----------...
【ant-design】Tree组件子节点不完全勾选获取父节点的值
Cainannan1995的博客
04-20 1113
需要把协同管理的ID一起传给后台，但是ant的tree组件的checkedvalue只会选择到请假管理的ID，所以我们需要在执行check的时候。但是这样做的话，当我们在编辑的时候后台数据也会返回给我们一个父节点ID导致组件会默认全部勾选，所以我们要对返回的选中id组合进行筛选。我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去，如图。
控制 Ant Design TreeSelect 的搜索与展开功能
最新发布
chanyeol14805的博客
06-20 1008
本文探讨了优化Ant Design树选择组件(a-tree-select)搜索和选中节点展开行为的解决方案。
antd Tree树形控件——不完全选中子节点后想要获取父节点的值，与后端交互
z止于至善的博客
12-26 7321
最近有一个权限树的需求，而且树的结构比较深，想要实现，在不完全选中子节点后能够获取父节点的值，一并传给后端。 不完全选中子节点后想要获取父节点的值 如图：选中【新增用户】和【批量导入】时，想要把【用户列表】和【用户管理】的id也传给后端。 通过阅读API文档， onCheck是复选框选中时触发，其中第二个参数是一个事件对象，他的返回值打印出来如下： 其中，有一个属性halfCheckedKeys就是关联父节点的值。这样，我们可以轻松的拿到值了，和选中节点拼接起来一起传给后台就好了。 onCheck =
ant design vue tree授权，子项不必全部选中，父级也被选中
qq_43468165的博客
05-17 4437
实现效果 注意tree原生是，如果子集只选中了一个，父级是方块样式选中，而不是对号方式选中。最终获取的checkedKeys列表中是不会包含方块选中的父级id的，但是这对后端数据授权处理是不友好的。 那么怎么然传到后端的checkedKeys包含上面所说的父级id呢。我想出了两个方案： 1.就是tree是关联状态，即:checkStrictly="false"（tree默认就是这个可以不写），有关联时候我们可以通过check方法获得关联的方块选中的父级有哪些，这个数组在info.halfCheck
antd 中 Tree 的使用-默认选中问题
datouniao1的博客
04-01 9060
使用antd的Tree 控件的控件的时候，数据回显的时候发现所有的都选中了，很奇怪 默认选择的节点，为什么选中了所有的节点 并且有一个特点是，如果父节点是选中状态，那么子节点就默认选中了，那么这样的回显并不是准确的，所以问题在于当回显的时候父节点被选中了，子节点不需要被选中
ant-design-vue中实现a-tree树形控件父子关联选中过滤的算法
晓风残月淡的博客
09-07 1620
在使用ant-design-vue的框架时，a-tree是比较常用的组件，比较适合处理树形结构的数据。 但是在与后台数据进行授权交互时，就不友好了。在原生官方文档的例子中，若子项被勾选，则父级节点会被关联勾选，但这勾选并不一定是选中的意思。有可能是半选中，通过方框样式选中，也就是说父级节点的值不会出现在`checkedKeys`的数组中。 所以需要将服务传过来的数据`allCheckedKeys`处理，再还原成选中`checkedKeys`和半选中`halfCheckedKeys`的两部分。
带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选
11-13
当子节点的复选框状态改变时，也会影响到它的父节点，这涉及到“级联选择”或“联动选择”的逻辑。 4. **控制父节点（Controlling Parent Nodes）**： 当用户勾选或取消一个子节点的复选框时，我们需要判断该操作...
antd Tree父节点半选中问题
lady132的博客
04-19 1961
对父节点半选中状态进行设置及回显问题解决
Tree组件实现父子节点分离(父子节点自定义逻辑关联)【antd】实现Tree复选，数型数据递归处理
qq_39532524的博客
02-06 3730
大概讲一下如何实现，首先在默认进入时保留一个选中的id集，然后在选择的时候比对本次与上一次的差异，向下查找该节点下所有子节点的id，然后向上查找所有父节点的id，判断本次操作是否勾选来决定子节点集是合并还是移除。项目中我们用的Tree组件一般都是父子节点关联的，但是产品提出了个需求，没办法使用组件自带的逻辑了，只能自定义逻辑进行管理选中节点。
【避坑指“难”】Antd Tree半选状态halfCheckedKeys渲染问题
椰卤工程师的个人博客
01-13 7005
一、复现问题 Antd的Tree树形组件，勾选后，如果父节点下的所有子节点没有被勾选（半选状态），传值的时候是不会传父节点的，只有在勾选了所有子节点的时候（全选状态）才会传父节点的值。 二、解决方案 1）在半选的状态下，也要将父节点传值给后端 const [checkedKeys, setCheckedKeys] = useState<number[]>([]); const [treeData, setTreeDate] = useState([]); const [paramsList,
antd-design-vue Tree树形控件——不完全选中子节点后想要获取父节点的值，与后端交互
Go_South_的博客
02-07 2722
antd-design-vue Tree树形控件——不完全选中子节点后想要获取父节点的值，与后端交互
treeselect只选了分支节点全选_TreeSelect 树选择器如何使父节点不可选中，只能做展开收起功能...
weixin_42503036的博客
02-22 1201
Translation of this issue:TreeSelect tree selector how to make the parent node unselectable, can only do expansion function[] I have searched the issues of this repository and believe that this is not...
Ant Design TreeSelect树形选择器格式化数据以及禁用父节点
陈新科的博客
11-26 4933
效果图： 灰色的父节点是被禁用不能点击的 关键代码： 格式化后台数据和禁用点击父元素 <a-tree-select v-model:value="value" //uid唯一值 tree-data-simple-mode //使用简单格式的 treeData style="width: 70%" :dropdown-style="{ maxHeight: '400px', overflow: 'a...
treeselect只选了分支节点全选_TreeSelect 树形选择器组件，父子节点的选中关联时，若子组件有未选择情况，则最终收集所有checked的时候不包含该节点集父节点...
weixin_28944067的博客
01-12 617
Translation of this issue:TreeSelect Tree Selector component, when the parent and child nodes are selected and associated, if the child component has no selection, the node will not be included when a...
React antd 树组件自定义父子节点交互逻辑（包括全选，半选，全不选三种状态）使用checkStrictly使父子节点状态不再受控
m0_71630007的博客
04-13 4133
先使用checkStrictly使父子节点状态不再受控，checkedKeys属性有两个参数可以用来控制全选和半选状态（checked是所有勾选中的id，halfChecked是半选的id），通过setCheckedKeys来控制状态即可。4. 子节点全部勾选，子节点最近一级的父节点是全选状态（再上一级根据旗下的子节点是否全选进行判断，以此类推...）；5. 子节点全部取消勾选，父节点不取消，呈半选状态。2. 父节点选中为勾选状态，子节点全部勾选；1. 父节点选中为半选状态，子节点不选中；
vue-ant-design的Tree(树形结构)的父子节点关联问题
Lycoriy的博客
08-13 5882
树形结构父子节点有关联的逻辑是：父节点选中，子节点自动选中，子节点全都选中，父节点自动选中。项目需求是：父节点可以控制子节点，也就是点击选中父节点时，子节点全部选中，点击取消父节点时，子节点也随之取消；但是点击子节点选中或者取消都不会影响到父节点。 第一步：切断父子节点之间的关联。 checkStrictly控制父子节点关联，默认为false，表示父子节点有关联，将他的值改为true，切断父子节点之间的关联。 第二步：监控check事件，操作绑定数据checkedKeys。 点击复选框，e.check
antd tree 受控状态下如何获取现在勾选的子节点的所有父节点
04-24
可以通过递归遍历树的数据结构，判断每个子节点的勾选状态，若为勾选，则将其父节点添加到一个数组中，并继续递归遍历其父节点的父节点，直到根节点为止。最后返回这个存储了所有父节点的数组即可。以下是一个示例...
评论 25
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值