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 ...
随机推荐
- 怎样在局域网中给网站作ssl认证,使其能以https协议访问(转)
如果要在局域网达到效果需要满足以下几点要求: 1. 证书由可信任的CA机构颁发 2. 证书在有效期 3. 访问地址和证书的认证地址一致 说明: 1. 需要在局域网内构建CA机构 2. 证书的有效期建议 ...
- release版本 APP 出现waiting for debugger
前提:同一包代码,打包两个版本,修改包名,在同一设备上存在两个版本 状态:运行时,发现 一版本是正常 另一版本打开会提示 Waiting for debugger弹窗,(此时由于是开发状态,设备一直开 ...
- ocelot 从15.x版本升级到16.x版本 UnableToFindDownstreamRouteError Message: Failed to mat ch Route configuration for upstream path
项目里面用到 ocelot ,之前老的项目用的是 15.x 最近要一个新项目也要用到,直接安装了最新的16.x,结果死活都匹配不到上游路径. 刚开始以为是自己代码写得有问题,各种找问题,结果后来把oc ...
- 欢迎加入d3shop,一个DDD实战项目
背景 整个<老肖的领域驱动设计之路>系列关于认知的核心部分已经基本闭环,但纸上得来终觉浅,还是需要通过实际操作来体会和验证我们的观点,接下来,我将通过一个实战项目来带着大家一起体验从需求到 ...
- 音视频FAQ(二)视频直播延时高
摘要 延时高是实时互动技术中常见的问题之一,解决延时高问题需要综合考虑网络.设备.编解码算法等多个因素.解决方案包括优化设备端延时.优化网络传输延时和使用UDP进行音视频传输等.在选择音视频传输协议时 ...
- TypeScript – Using Disposable
前言 TypeScript v5.2 多了一个新功能叫 Disposable. Dispose 的作用是让 "对象" 离开 "作用域" 后做出一些 " ...
- Python写入数据到MySQL数据库并读取
1.导入pymysql库 命令行输入pip3 install PyMySQL 2.连接数据库 import pymysql db = pymysql.connect(host='localh ...
- Windows右下角时间显示具体星期
事件起因: 有时候脑子不清楚,过着过着就会忘记今天是星期几,错过一些重要事情,于是乎就想看看Windows右下角能不能显示到具体星期,果然在查了资料之后这个需求可以达成 解决办法: 控制面板 - 日期 ...
- AD域下,普通用户环境下安装软件需要管理员权限的解决办法
原理:将AD域普通用户添加到管理组中,使其拥有管理员权限 做法: 1.切换到AD域管理员账户: 2.计算机 -> 管理 -> 用户和组 -> 组 -> Administrato ...
- java使用正则表达式验证手机号和电话号码和邮箱号码的方法
验证手机号 我国的手机号一般是以1开头,后面跟着10位数字.因此,可以用如下正则表达式: public static boolean isValidPhoneNumber(String phoneNu ...