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 ...
随机推荐
- docker系列教程:docker图形化工具安装及docker系列教程总结
通过前面的学习,我们已经掌握了docker-compose容器编排及实战了.高级篇也算快完了.有没有相关,我们前面学习的时候,都是通过命令行来操作docker的,难道docker就没有图形化工具吗?答 ...
- 【YashanDB知识库】自关联外键插入数据时报错:YAS-02033 foreign key constraint violated parent key not found
问题现象 使用如下的sql语句创建自关联外键表: drop table self_f_key; create table self_f_key(t1 number primary key not nu ...
- logistic和softmax
一直觉得logistic regression就是softmax的一种特殊的形式,softmax是多类,logistic是两类. 但是今天仔细想了想logistic的意义以及softmax的意义,感觉 ...
- CSS – Sass & SCSS
前言 CSS 代码多了就不好管理了, 这是它语法先天的不足. Sass 就是加强它语法的, Sass 为 CSS 引入了一些 JS 语言的特性, 比如 variable, function, para ...
- 月薪20k以上的软件测试工程师的必备知识点?全部拿走吧!
我们都知道作为一个软件测试工程师,入门相对比较简单,但是要达到技术精通,甚至薪资能达到20k以上的话,那绝对需要对测试开发有一个系统的了解,以及对这些系统的知识能够熟练掌握. 今天的话是我从阿里以为做 ...
- Git 本地仓库与基础操作指令
本地仓库 获取本地仓库 在电脑任意位置创建一个空目录(例如test)作为我们的本地Git仓库 进入这个目录中,右键打开Git Bash窗口 执行 git init命令 如果创建成功后可在文件夹下看到隐 ...
- 《Vue.js 设计与实现》读书笔记 - 第11章、快速 Diff 算法
第11章.快速 Diff 算法 11.1 相同的前置元素和后置元素 快速 Diff 算法包含预处理步骤,这借鉴了纯文本 Diff 算法的思路. 先把相同的前缀后缀进行处理,然后再比较中间部分. fun ...
- linux中安装mysq5.7
linux中安装mysq5.7 一. 安装mysql yum install mariadb-server mariadb 二. 开启mysql service mysqld start 四. 停止m ...
- Android :安卓学习笔记之 Handler机制 的简单理解和使用
目录 Handler机制 1.Handler使用的引出 2.背景和定义 3.作用和意义 4.主要参数 5.工作原理及流程 5.1.对应关系 6.深入分析 Handler机制源码 6.1.Handler ...
- 更强的RAG:向量数据库和知识图谱的结合
传统 RAG 的局限性 经典的 RAG 架构以向量数据库(VectorDB)为核心来检索语义相似性上下文,让大语言模型(LLM)不需要重新训练就能够获取最新的知识,其工作流如下图所示: 这一架构目前广 ...