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

最新推荐文章于 2024-05-30 16:24:50 发布
最新推荐文章于 2024-05-30 16:24:50 发布
阅读量2.2w 收藏 23
点赞数 13
分类专栏： React Antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32899575/article/details/81458145
版权

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

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

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

解决办法：

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

 

www.woke20.com

woke丶
关注
  • 13
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 25
    评论
专栏目录
React antd tree树组件 - 父子节点没有自动关联情况下 - 显示半选、全选状态以及实现父子节点互动
m0_46364033的博客
08-14 2532
如Ant Design Vue 中所示，并没有提供获取半选节点的方法，当设置checked和checkStrictly时，父子节点也不再自动关联了。
React antd 树组件自定义父子节点交互逻辑（包括全选，半选，全不选三种状态）使用checkStrictly使父子节点状态不再受控
m0_71630007的博客
04-13 2912
先使用checkStrictly使父子节点状态不再受控，checkedKeys属性有两个参数可以用来控制全选和半选状态（checked是所有勾选中的id，halfChecked是半选的id），通过setCheckedKeys来控制状态即可。4. 子节点全部勾选，子节点最近一级的父节点是全选状态（再上一级根据旗下的子节点是否全选进行判断，以此类推...）；5. 子节点全部取消勾选，父节点不取消，呈半选状态。2. 父节点选中为勾选状态，子节点全部勾选；1. 父节点选中为半选状态，子节点不选中；
react 总结antd tree 和父子组件之间的传值
棠樾的博客
06-01 694
项目需求：点击产品树节点时获取该节点的所有父节点，同时回填表格的搜索条件，完成搜索功能，搜索结果展示在下方的table中。 写了三个组件： 现在有个业务场景交互：在orderTree组件中点击树节点，获取当前节点以及所有的父节点的Id 放入一个对象arrKeys中，并在orderForm组件中使用(回填类型下拉选择框，objId对象作为查询接口的入参) 现在可以分部解决问题： 1.首先获取点击...
a-tree 实现一棵结构树 可以选中、自动展开
最新发布
abcd123596的博客
05-30 394
a-tree 实现一棵懒加载的结构树 点击选择会加载当前节点剩下的树 选中所有子节点 并且回显时会自动展开树 自动选中已选数据
【避坑指“难”】Antd Tree半选状态halfCheckedKeys渲染问题
椰卤工程师的个人博客
01-13 6229
一、复现问题 Antd的Tree树形组件，勾选后，如果父节点下的所有子节点没有被勾选（半选状态），传值的时候是不会传父节点的，只有在勾选了所有子节点的时候（全选状态）才会传父节点的值。 二、解决方案 1）在半选的状态下，也要将父节点传值给后端 const [checkedKeys, setCheckedKeys] = useState<number[]>([]); const [treeData, setTreeDate] = useState([]); const [paramsList,
【React3 树形控件的实现】支持多展开父节点和单选子节点功能
qq_38657604的博客
01-19 1330
React3中树形控件结合自己的实际应用进行调整后形成的树，最后有效果图
递归方法
weixin_34005042的博客
09-11 117
//根据propId一次找出所有父元素的name getConKeyName(props: model.proItem[], propId: number): string { let res = '' for (let item of props) { if (item.children && item.children.lengt...
右击树形控件实现节点动态添加删除修改（VC 6.0实现）
08-01
在上述代码中，`OnAddNode()`函数实现了在选中的父节点下添加新节点；`OnDeleteNode()`函数删除了选中的节点；`OnModifyNode()`函数弹出对话框获取新名称，然后更新选中节点的文本。 别忘了为这些命令在资源.rc文件...
带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选
11-13
当子节点的复选框状态改变时，也会影响到它的父节点，这涉及到“级联选择”或“联动选择”的逻辑。 4. **控制父节点（Controlling Parent Nodes）**： 当用户勾选或取消一个子节点的复选框时，我们需要判断该操作...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。 增加节点，点击确定后局部刷新，渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
ant-design-editable-tree-table:可编辑的树形表格，有两个分支哦，v4 是 antd v4 的版本
05-01
“可编辑的树形表格”是一种复合型组件，它结合了表格（Table）和树形结构（Tree）的功能，用户不仅可以查看层次化的数据，还能直接在表格单元格内进行编辑。这对于数据管理，特别是处理具有层级关系的数据时非常...
element ui 树状表格选择父节点子节点全选，子节点不全选父节点半选
m0_58565372的博客
05-19 9524
以上就可以实现树状表格选择父节点子节点全选，子节点不全选父节点半选，但是对于handleSelectionChange，里面处理数据还是很懵的，虽然解决了，但是感觉不是最优的方法，如果有好的解决方法，可以分享下，欢迎分享和指正。这个里面还是比较混乱的，打印出来三次，这个我是可以理解的，因为勾选了三个，但是打印的这个顺序，我不太懂，由于有个勾选之后，操作批量下载和批量取消，不勾选的时候，是禁止点击批量下载和批量取消的。于是我就对上面的代码进行了改进。
antd Tree选中的时候需要获取父元素id
MYG_G
06-12 5301
博主在做权限树的时候，遇到过这样一个问题。只要子元素有一个元素被选中，后端需要我把选中节点的父元素也传过去。但是antd Tree默认的checkedKeys中只有子元素全部选中的时候才会把父元素选中，checkedKeys才会包含父元素的值。 解决方法：在onCheck事件里，有两个参数checkedKeys（你选中的元素）, info（包含选中子节点的信息），在info里就有他父节点的信息，可以通过info.halfCheckedKeys来获取。然后把父节点元素和子节点放在一个数组，传给后端就好了。 上
treeselect只选了分支节点全选_TreeSelect 树选择器如何使父节点不可选中，只能做展开收起功能...
weixin_42503036的博客
02-22 1098
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...
el-tree操作数，子级选中父级全部选中，父级取消选中子级全部取消选中，父级选中子级不选中
qq_40011214的博客
09-06 1571
1
vue+antDesign实现树形数据展示并表格父子级选中和取消联动；递归
Sunny_lxm的博客
10-24 5915
vue+antDesign实现树形数据展示并表格父子级选中和取消联动
Ant Design TreeSelect树形选择器格式化数据以及禁用父节点
陈新科的博客
11-26 4600
效果图： 灰色的父节点是被禁用不能点击的 关键代码： 格式化后台数据和禁用点击父元素 <a-tree-select v-model:value="value" //uid唯一值 tree-data-simple-mode //使用简单格式的 treeData style="width: 70%" :dropdown-style="{ maxHeight: '400px', overflow: 'a...
日常写BUG-2、获取选中节点的所有父节点
Code P的博客
06-17 783
一、场景 描述：在使用ant-design-vue的树选择组件(TreeSelect)时，需要获取到旋转节点的所有父节点，并通过数组的形式返回 二、实现 ```javascript /** * @description: * @param {*} tree 树 * @param {*} menuid 选择的节点 * @return {*} */ treeFindPath(tree, menuid) { var path = [
antd tree 受控状态下如何获取现在勾选的子节点的所有父节点
04-24
可以通过递归遍历树的数据结构，判断每个子节点的勾选状态，若为勾选，则将其父节点添加到一个数组中，并继续递归遍历其父节点的父节点，直到根节点为止。最后返回这个存储了所有父节点的数组即可。以下是一个示例...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 25
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值