el-tree 获取选中的节点key, 包含父子节点

已于 2022-05-10 23:27:35 修改
阅读量2k 收藏 4
点赞数 1
文章标签： vue.js 前端 javascript
于 2022-05-10 23:21:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tang_jian_dong/article/details/124700096
版权 

this.add.auth = selectedObj.checkedKeys
this.$refs.tree.getHalfCheckedKeys().forEach(s => {
  this.add.auth.push(s)
})
console.log(this.$refs.tree.getHalfCheckedKeys())

 

tang_jian_dong
关注
el-tree获取当前选中节点及其所有父节点的id(包含半选中父节点的id)
qq_37635012的博客
01-18 1181
如下图，我们现在全勾中的有表格管理及其下的子级，而半勾中的有工作台和任务管理及其子级。与源数据id一模一样，达到目的。
el-tree获取选中的节点数据展示（不包含父节点）
weixin_43899694的博客
05-14 3927
<el-tree class="my-tree" ref="tree" :data="gridData" show-checkbox check-strictly // 严格遵守父子级互不关联 @check-change='getCheckedNode' node-key="id" :default-expanded-keys="[1]" :props="defaultProps"> </el-tree> getCheckedNode(){
el-tree控件获取当前被选中的节点,以及父节点（祖节点）
m0_65518920的博客
03-22 3402
初始设置checkStrictly为true,让父子不关联，因为我这里接口反显的时候会把父的信息也反显过来，关联了就会把父的所有子级全部勾选中。这里最大的问题就是反显的问题了，一开始我设置checkStrictly为false,然后在拿父祖的信息毫无。然后将全选的和半选的放进一个数组里，就能拿到实现我们要的， 获取当前被选中的节点,以及父节点（祖节点）了。在拿到后端传回的父子数据渲染页面时，我们希望不要关联。问题，以为轻松解决了，试了几遍就发现反显的时候因为返回了父的信息，所以会把所有的子项全。
vue如何获取tree当前选中的节点,【Vue】ElementUI tree控件如何取得被选中的节点，以及父节点（即使没被全选）...
weixin_36471865的博客
03-27 3956
需求有了变动，之前只需要提交被选中的叶节点的id数组，那时候直接通过官方的api【getCheckedKeys】直接拿到。现在要求也要将父节点的id也传过去。卡壳了，看了Issues，不少网友都有这种需求，没看到靠谱的方法。有个思路，先通过getCheckedKeys拿到子节点的id，然后去tree的data去一个个去遍历，存在的给父节点id取出来，最后重组所有已选中的id进行提交，但如果遇到N多...
定位到选中的el-tree树状控件节点的位置
最新发布
你若盛开，清风自来
08-18 1054
本文将介绍如何使用el-tree树状控件定位到选中的节点的位置，帮助读者更好地理解el-tree树状控件的使用方法，提高前端开发的效率。el-tree树状控件是Vue.js中的一个树状控件组件，它允许开发者轻松地展示和操作树状数据结构。丰富的功能：el-tree树状控件提供了丰富的功能，如节点选择、节点拖拽、节点编辑等。简洁的API：el-tree树状控件使用简洁的API，使得树状控件的使用更加直观和易于理解。良好的兼容性：el-tree树状控件具有良好的兼容性，可以在不同的环境中使用。
获取el-tree的选中节点以及半选中节点
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
04-17 2780
通过getCheckedKeys获取到已选中节点，以及通过getHalfCheckedKeys获取到半选中节点进行拼接，然后进行合并即可获得一个包含选中以及半选中的数组。
elementui中el-tree获取节点的选中、设置节点的选中
qq_45750213的博客
12-18 6649
this.$refs.tree.getCheckedNodes()//返回的是数组，包含所有选中的节点，不只是叶子节点。this.$refs.tree.setCheckedKeys(ids)//传递的是叶子节点的id合集。* @param data - 传递给 data 属性的数组中该节点所对应的对象。// 筛选出已经选中的子节点的id集合。// 获取当前节点的选中状态。* 节点被点击时的回调。
el-tree在多选情况下，获取所有选中的叶子结点
weixin_37331593的博客
08-01 872
我们在使用 `elementUI` 的`el-tree`树形插件选中节点时，通常只需要得到选中的叶子结点，不需要父节点，这样的话可以通过`getCheckedNodes`方法来获取。
element：el-tree控件获取当前选中节点（key）值
编写博客，学习交流
02-16 1万+
el-tree定义 <el-tree :data="data" node-key="levelId" :props="defaultProps" @check-change="handleCheckChange" @check="handleCheck" show-checkbox> </el-tree> check和check-change都可以用,那个方便用那个 触发 check:当复选框被点击的时候触发 check-change:节点..
【JavaScript源代码】element的el-tree多选树(复选框)父子节点关联不关联.docx
12-28
在JavaScript的前端开发中，Element UI 是一个...总的来说，el-tree的`check-strictly`属性是控制父子节点关联性的重要开关，开发者需要根据实际需求来灵活运用，并结合其他属性和事件处理器来实现自定义的交互逻辑。
elementui el-tree 菜单树多选框勾选父子节点显示问题
小狐狸和小兔子
12-30 4858
elementui el-tree 关于菜单权限选择的问题，如图，比如系统设置下有用户管理、角色管理、组织架构管理，现在分配权限只勾选了如图所示权限，我们先将数据保存到后台 // 保存权限设置验证 // 获取所有选中的节点 const checkeds = this.$refs.tree.getCheckedKeys(); // 获取目前半选中节点 const checkedParent = this.$refs.tree.getHalfCheckedKeys(); // 合并父子节点，避免菜单显示逻辑错误
el-tree树形控件，父子节点不关联，单选时后端没有返回唯一id问题解决
m0_63872974的博客
03-11 2491
el-tree树形控件，父子节点不关联，单选时后端没有返回唯一id问题解决
el-tree定位当前选中的节点
junyang2016的博客
06-23 7670
工作中遇到一个需求：带有y轴scroll的tree需要通过外部的按钮，高亮选中的节点。
ElementUI tree控件获取选中的节点（含父节点）
Irene1991的博客
03-18 3万+
ElementUItree控件如何取得被选中的节点，以及父节点（即使没被全选）
el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因
m0_65607651的博客
07-08 1751
el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因 隐藏第一层或最后一层节点的勾选框
el-tree获取被选中的叶子节点
ioncannontic的博客
04-08 591
el-tree获取被选中的叶子节点
el-tree懒加载获取所有已经选的节点
weixin_53539322的博客
07-06 614
用于el-tree懒加载一个图层目录，勾选父级目录，需要得到该父级目录下所有叶子节点数据
开发需求总结9-el-tree获取选中节点，节点全选时返回被全选子级的父节点，未全选则返回被选中的节点
Mr_LiuP的博客
01-15 2132
el-tree获取选中节点，节点全选时返回被全选子级的父节点，未全选则返回被选中的节点
element：el-tree控件获取当前选中节点（key）值，超简单！！
热门推荐
W
01-07 3万+
呜呜呜，我终于弄明白这个el-tree怎么用了，主要还是要仔细看官网，网上去查到的真的是太复杂了，都是在坑我 在对tree设置唯一标识key时，需要设置node-key属性： 看官网文档，这个click方法就是我想要的理想方法啊，直接给出选中的节点、节点key值等 结果： 简直不要太好用了，代码如下： 重要的事情再说一次： ！！ 设置key值必须要设置node-key <el-tree ref="tree" :data="RoleTreeData...
帮我写一段vue代码。需求是利用el-tree，父子节点中只能选一个
06-08
好的，根据你的需求，可以通过监听el-tree的节点选中事件来实现父子节点中只能选一个的效果，具体代码如下： ```vue <template> <el-tree :data="treeData" :props="defaultProps" :node-key="nodeKey" :default-expand-all="true" @node-click="handleNodeClick" ></el-tree> </template> <script> export default { data() { return { treeData: [ { id: 1, label: 'Parent 1', children: [ { id: 2, label: 'Child 1-1' }, { id: 3, label: 'Child 1-2' } ] }, { id: 4, label: 'Parent 2', children: [ { id: 5, label: 'Child 2-1' }, { id: 6, label: 'Child 2-2' } ] } ], defaultProps: { children: 'children', label: 'label' }, nodeKey: 'id' } }, methods: { handleNodeClick(data, node) { // 获取当前节点的父节点和所有子节点 const siblings = node.parent ? node.parent.childNodes : this.$refs.tree.store.root.childNodes // 取消所有兄弟节点的选中状态 siblings.forEach((child) => { if (child !== node) { child.setChecked(false) } }) } } } </script> ``` 在这个示例中，我们监听了el-tree的节点选中事件，通过获取当前节点的父节点和所有子节点，然后取消所有兄弟节点的选中状态，从而实现了父子节点中只能选一个的效果。 需要注意的是，因为el-tree使用了异步加载，所以在取消兄弟节点的选中状态时，需要判断父节点是否存在。如果存在，则获取其子节点；否则，获取el-tree的根节点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值