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 ...
随机推荐
- 以MySQL为例,来看看maven-shade-plugin如何解决多版本驱动共存的问题?
开心一刻 清明节那天,看到一小孩在路边烧纸时不时地偷偷往火堆里扔几张考试卷子边烧边念叨:爷爷呀,你岁数大了,在那边多做做题吧,对脑子好,要是有不懂的地方,就把我老师带走,让他教您! 前提说明 假设 M ...
- 六,Spring Boot 容器中 Lombok 插件的详细使用,简化配置,提高开发效率
六,Spring Boot 容器中 Lombok 插件的详细使用,简化配置,提高开发效率 @ 目录 六,Spring Boot 容器中 Lombok 插件的详细使用,简化配置,提高开发效率 1. Lo ...
- 修改SpringBoot的配置文件application.yaml后启动失败
经常碰到修改application.yaml文件之后,SpringBoot项目启动失败的,报错信息如下 Connected to the target VM, address: '127.0.0.1: ...
- Redis 入门 - 安装最全讲解(Windows、Linux、Docker)
经过上一章节的介绍,相信大家对Redis已经有了大致的认知,今天主要给大家详细讲解Redis在Windows.Linux.Docker下的安装过程. 01.Windows 下面给大家介绍三种在Wind ...
- 17 Python异常处理(捕获异常、抛出异常、自定义异常)
本篇是 Python 系列教程第 17 篇,更多内容敬请访问我的 Python 合集 当我们编写代码时,可能会遇到各种各样的错误情况,比如除数为零.找不到文件.网络问题等等.为了优雅地处理这些问题,P ...
- UWP 通过 .NET 9 和Native AOT 的支持实现 UWP 应用的现代化
微软(9 月 11 日)发布博文,微软正在预览对 .NET 9 的 UWP(通用 Windows 平台)支持,为现有 UWP 开发人员提供一条使用最新的 .NET 和本机 AOT 实现其应用程序现代化 ...
- Asp.net Core – CSS Isolation
前言 ASP.NET Core 6.0 Razor Pages 新功能, 我是用 webpack 做打包的, 所以这个对我没有什么帮助. 但是了解一下是可以的. 希望 .NET 会继续发展的更好, 多 ...
- 参与 2023 第一季度官方 Flutter 开发者调查
Flutter 3.7 已经正式发布,每个季度一次的 Flutter 开发者调查也如约而至,邀请社区的各位成员们填写! 调查表链接: https://flutter.cn/urls/2023q1wx ...
- [OI] pb_ds
using namespace __gnu_pbds; Luogu Post#39 1.堆 1.1 基本信息 头文件 #include <ext/pb_ds/priority_queue.hpp ...
- 配置windows update失败还原更改
配置windows update失败还原更改_解决方案 解决方法: 方法1: 重启,按F8,选择最后一次正常启动. 如果还是需要等待.可采用方法2: 方法2: 重启,按F8,选 ...