el-tree获取当前选中节点及其所有父节点的id(包含半选中父节点的id)

已于 2024-01-19 09:12:55 修改
阅读量809 收藏
点赞数
分类专栏： JS实战记录 vue2实战记录 文章标签： vue.js 前端
于 2024-01-18 10:51:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/135668189
版权

如下图，我们现在全勾中的有表格管理及其下的子级，而半勾中的有工作台和任务管理及其子级
在这里插入图片描述
现在点击保存按钮后，需要将勾中的节点id及该节点对应的父节点，祖先节点的id（包含半选中父节点的id）也都一并传给后端，那这个例子里就应该共传入9个id，我们可以直接将getCheckedKeys()和getHalfCheckedKeys()两个方法获取的数据合并就是我们想要的数据了，

this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.</
了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
ztree获取当前选中节点的所有父节点数据
大白也没我白的博客
10-06 5161
业务需要，找了一圈，最后是自己用笨办法获取的，分享一下吧 var select = _ztree.getSelectedNodes(); if (!select.length || select[0].isParent) { $.showTips('请选择一个明细节点'); return; } var temp = []; var node = select[0].getParentNode(...
el-tree控件获取当前被选中的节点,以及父节点（祖节点）
m0_65518920的博客
03-22 1737
初始设置checkStrictly为true,让父子不关联，因为我这里接口反显的时候会把父的信息也反显过来，关联了就会把父的所有子级全部勾选中。这里最大的问题就是反显的问题了，一开始我设置checkStrictly为false,然后在拿父祖的信息毫无。然后将全选的和半选的放进一个数组里，就能拿到实现我们要的， 获取当前被选中的节点,以及父节点（祖节点）了。在拿到后端传回的父子数据渲染页面时，我们希望不要关联。问题，以为轻松解决了，试了几遍就发现反显的时候因为返回了父的信息，所以会把所有的子项全。
element-ui el-tree 获取当前选中数据（含半选中的父节点）
weixin_45825057的博客
12-23 2935
element-ui el-tree 获取当前选中数据（含半选中的父节点）
Element ui tree树形控件获取当前节点id和父节点id
weixin_34238633的博客
03-26 940
低版本Element ui tree树形控件获取当前节点id和父节点id的方法：点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程： 1.找到node_modules/element-ui/lib/element-ui.common.js文件 2.按Ctrl+F搜索TreeStore.prototype.getCheckedKeys这个方法，...
[element-ui] tree控件如何取得被选中的节点,以及父节点(即使没被全选)
qq_14993591的博客
03-10 4949
<el-tree :data="roleMenuData" node-key="id" ref="tree" :default-expanded-keys="default_expanded" :default-checked-keys="default_select" @check-change="handleCheckChange" :props="defaultProps" :show-checkbox="true" //增加这.
element el-tree 获取选中节点的父节点
最新发布
cc蒲公英的博客
03-26 521
element el-tree 获取选中节点的父节点
el-tree点击子节点，同时获取子节点和父节点的id
weixin_43412413的博客
08-13 6949
<el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree" @node-click="clickTree" :style="{ height:...
vue elementUI tree树形控件获取父节点ID的实例
10-18
今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
ElementUI中el-tree节点的操作的实现
12-28
有了这个方法，我们就可以得到选中的每个节点的id,拿到了id，那所有的问题就迎刃而解了。 废话不多说，直接上代码 html <div id=app> <el> <el click=checkedKeys>得到节点id</el> <el click=addNode>添加节点...
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
10-18
下面小编就为大家分享一篇解决Jstree 选中父节点时被禁用的子节点也会选中的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-tree 如何获取父节点的id
m0_49494051的博客
04-11 270
【代码】el-tree 如何获取父节点的id。
获取el-tree选择结点的id和父节点的id
vfjcgg的博客
08-19 1123
反正就是这些东西 console.log('getCheckedNodes:', this.$refs.addTree.getCheckedNodes()) console.log('parents:', this.$refs.addTree.getCheckedNodes(false, true)) var nodeList = this.$refs.addTree.getCheckedNodes(false, true) console.log('checkList', nodeList)
vue3 + element-plus(el-tree-select)递归函数 拿到父节点
longshao_520的博客
03-31 1035
node参数就是当前节点的所有数据 以及所有父节点的数据 (node.parent)node-click的两个参数 （data node）
el-tree 如何拿到选中节点的父节点
weixin_50911602的博客
08-19 3943
el-tree 如何拿到选中节点的父节点
el-tree使用获取当前选中节点的父节点数据（开发记录）
weixin_43939111的博客
03-31 5494
el-tree获取点击父节点数据
el-select获取id和name
weixin_51722520的博客
11-03 1972
el-select获取多个值
Vue项目里Websocket的使用
热门推荐
qq_37635012的博客
10-08 2万+
由于项目需求有要使用长链接，我们普通的http请求如果用轮询的方式与服务端通讯就很消耗资源。我们一起来学习一下在vue项目里如何使用websocket,本文纯属个人观点，如果有不正确的地方请大家批评指正，技术无高低，谦虚学习的心态我认为很重要，天外有天人外有人。
el-tree 的show-checkbox模式下 选中父节点时，子节点不选中
06-13
在 el-tree 的 show-checkbox 模式下，选中父节点时，默认情况下子节点也会被选中。如果你希望选中父节点时，子节点不被选中，可以使用 el-tree 的 node-key 属性来实现。具体步骤如下： 1. 在 el-tree 组件上添加 node-key 属性，该属性用于指定节点的唯一标识符，可以是任意字符串或数值类型的属性，建议使用节点的 id 属性。 ```html <el-tree :data="data" :node-key="'id'" show-checkbox> ``` 2. 在 el-tree 的 check-change 事件中，获取选中的节点和取消选中的节点，在选中父节点时，取消选中其子节点。具体代码如下： ```javascript <el-tree :data="data" :node-key="'id'" show-checkbox @check-change="handleCheckChange"> </el-tree> ... methods: { handleCheckChange(data, checkedNodes) { checkedNodes.forEach(node => { if (node.children) { if (node.checked) { this.$refs.tree.setCheckedKeys(node.children.map(child => child.id), false); } } }); } } ``` 在 handleCheckChange 方法中，遍历选中的节点，如果节点有子节点，则取消选中子节点。这里通过 this.$refs.tree.setCheckedKeys 方法实现取消选中操作，该方法接受两个参数，第一个参数是一个数组，包含需要取消选中的节点的 node-key 值，第二个参数是一个布尔值，用于指定是否勾选节点。在本例中，将第二个参数设置为 false 即可实现取消选中操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值