element ui Tree树形控件获取未全选父节点和子节点id
Tree树形控件选中状态

在做分配权限的时候如图选择了父节点的某些子节点,现在父节点是半选中状态,使用this.$refs.tree.getCheckedKeys()只能拿到当前的子节点,子节点全选才能拿到父节点,而后台需要我们把父节点和子节点一起带过去。
解决方法
// 获取选中的子节点
let checkedKeys = this.$refs.tree.getCheckedKeys();
// 获取选中的父节点
let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
// 合并
let functionIdList = checkedKeys.concat(hafCheckedKeys)
然后再传给后台
这样我们就解决了子节点未全选时拿到父节点id
Tree树形控件回显问题
解决了上一步你会发现回显的时候有问题,后台返回的数据中选有父节点id和子节点id就导致父节点直接全选
解决办法
// 先清空选中状态
this.$refs.tree.setCheckedKeys([])
functionIdList.forEach(i => {
// 根据id 拿到 Tree 组件中的node的所有信息
let node = this.$refs.tree.getNode(i);
// node.isLeaf:判断当前节点是否为子节点
if (node.isLeaf) {
//如果是子节点,就把状态设置成选中
this.$refs.tree.setChecked(node, true);
} else { }
})
//functionIdList是设置选中的数据
原文链接:https://blog.csdn.net/green111111112/article/details/112371860
element ui Tree树形控件获取未全选父节点和子节点id的更多相关文章
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- Element ui tree树形控件获取父节点id
Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...
- vue_elementUI_ tree树形控件 获取选中的父节点ID
el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...
- vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用
其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...
- BootstrapBlazor实战 Tree树形控件使用(2)
继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,My ...
- BootstrapBlazor实战-Tree树形控件使用(1)
实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/Sql ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- ElementUI Tree树形控件renderContent return时报错
问题描述: 使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下: 问题分析: renderContent函数中需要使用js ...
- Element ui 使用 Tree 树形控件
使用树形控件需要映入 jsx才能运行链接:https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage npm install\ babe ...
- vue-element Tree树形控件通过id默认选中
一.设置 1.给树形控件设置 ref="tree" node-key="id" 2.在获取数据的位置加上 this.$nextTick(() => { t ...
随机推荐
- js玩儿爬虫
前言 提到爬虫可能大多都会想到python,其实爬虫的实现并不限制任何语言. 下面我们就使用js来实现,后端为express,前端为vue3. 实现功能 话不多说,先看结果: 这是项目链接:https ...
- java 知识
1. 单文件java 例子和简单项目例子 http://kleinfelter.com/java-hello-world-with-visual-studio-code-and-eclipse jav ...
- 开源大模型占GPU显存计算方法
运行大模型GPU占用计算公式: \(M=\frac{(P * 4B)}{32 / Q} * 1/2\) M : 以GB标识的GPU内存 P : 模型中的参数数量,例如一个7B模型有70亿参数 4B : ...
- 事务TRANSACTION 1
MySQL事务是指一组SQL语句作为一个工作单元,同生共死.类似JS中的Array.prototype.every方法 事务的特点 原子性(Atomicity):即事务中的SQL像原子一样牢不可破,无 ...
- 机器学习--决策树算法(CART)
CART分类树算法 特征选择 我们知道,在ID3算法中我们使用了信息增益来选择特征,信息增益大的优先选择.在C4.5算法中,采用了信息增益比来选择特征,以减少信息增益容易选择特征值多的特征的问题. ...
- Java实现英语作文单词扫盲程序
来自背英语四级单词的突发奇想: 是否可以通过Java语言实现一个随机抽取作文中单词进行复习的程序. 首先,展示下成果: 点击查看代码 package Demo; import java.util.Ar ...
- sql 查询死锁
1 -- 查询死锁 2 --第一种 3 sp_lock 4 5 --第二种 6 select object_name(resource_associated_entity_id) as tableNa ...
- Angular 18+ 高级教程 – Animation 动画
前言 Angular 有一套 built-in 的 Animation 方案.这套方案的底层实现是基于游览器原生的 Web Animation API. CSS Transition -> CS ...
- manim边学边做--弧形多边形
弧形多边形是一种结合了圆弧和多边形的图形,这类几何图形在设计中应用非常广泛. 比如在家居设计中,看看家里的沙发,餐桌和座椅等,它们的边角,靠背等地方都是弧形的设计,这种设计有效柔化了室内空间,使整体氛 ...
- 第42天:WEB攻防-PHP应用&MYSQL架构&SQL注入&跨库查询&文件读写&权限操作 - 快捷方式
接受的参数值未进行过滤直接带入SQL查询 MYSQL注入:(目的获取当前web权限) 1.判断常见四个信息(系统,用户,数据库名,版本) 2.根据四个信息去选择方案 root用户:先测试读写,后测试获 ...