解决el-tree数据回显时子节点部分选中父节点都全选中问题

//数据结构<el-tree ref="tree_edit" :check-strictly="checkStrictly" :data="powerList" :props="defaultProps" :default-expand-all="true" :default-expanded-keys="checkedCities" :default-checked-keys="checkedCities" @check-change="handleClick_edit" show-checkbox node-key="id" class="permission-tree" />powerList: [], //数组
checkList_edit: [],//修改勾选
checkStrictly: false,
defaultProps: {children: 'children',label: 'menuName',
},

编辑回显方法(匹配选中id,接口返回选中id数组)设置选中:

 edit(index) {this.dialogFormVisible_edit = true;this.checkStrictly = true;  //重点:给数节点赋值之前 先设置为truelet menuIds = Array.from(new Set(this.tableData[index].menuButtonIds.split(",")));let intArray = menuIds.map(str => parseInt(str));console.log(intArray);API.GetMenu({}).then(res => {if (res.code == 200) {this.roleform_edit.id = this.tableData[index].id;this.roleform_edit.status = this.tableData[index].status;this.roleform_edit.roleName = this.tableData[index].roleName;this.roleform_edit.remark = this.tableData[index].remark;this.$nextTick(() => {this.powerList = res.data;this.checkedCities = intArray;//回显this.$refs.tree_edit.setCheckedKeys(intArray, true)this.checkStrictly = false //重点: 赋值完成后 设置为false})//简单方法/*this.$nextTick(() => {let arr=[];this.powerList.forEach(item=>{if(!this.$refs.tree_edit.getNode(item.id).childNodes || !this.$refs.tree_edit.getNode(item.id).childNodes.length){arr.push(item.id)}})this.$refs.tree_edit.setCheckedKeys(arr);})*/} else {return false;}})},

再次勾选方法(以原数据结构获取选中数据):

handleClick_edit(data, checked, node) {if (checked) {let childNode = this.$refs.tree_edit.getCheckedKeys();//返回选中子节点的key   let parentNode = this.$refs.tree_edit.getHalfCheckedKeys();//返回选中父节点的key   let checkedAll = childNode.concat(parentNode);this.checkList_edit = this.treeFilter(this.powerList, node => checkedAll.includes(node.id))console.log(this.checkList_edit)}},
//递归匹配treeFilter(tree, func) {return tree.map(node => ({ ...node })).filter(node => {node.children = node.children && this.treeFilter(node.children, func)return func(node) || (node.children && node.children.length)})},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/203112.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JFrog Artifactory二进制文件管理工具部署使用

1.简介 JFrog Artifactory二进制文件管理工具&#xff0c;目前已经在使用的公司有很多&#xff0c;足见他的方便好用。 2.下载安装包 点击下载地址 这里我下载的是7.9.2版本 3. 安装 &#xff08;1&#xff09;在安装JFrog Artifactory之前需要安装好jdk&#xff08;需…

9_企业架构队列缓存中间件分布式Redis

企业架构队列缓存中间件分布式Redis 学习目标和内容 1、能够描述Redis作用及其业务适用场景 2、能够安装配置启动Redis 3、能够使用命令行客户端简单操作Redis 4、能够实现操作基本数据类型 5、能够理解描述Redis数据持久化机制 6、能够操作安装php的Redis扩展 7、能够操作实现…

看图学源码 之 ConcurrentHashMap 源码分析

内容迁移到&#xff1a;看图学源码 之 ConcurrentHashMap put、get、remove、clear、扩容等相关方法的源码分析

AWS 日志分析工具

当您的网络资源托管在 AWS 中时&#xff0c;需要定期监控您的 AWS CloudTrail 日志、Amazon S3 服务器日志和 AWS ELB 日志等云日志&#xff0c;以降低任何潜在的安全风险、识别严重错误并确保满足所有合规性法规。 什么是 Amazon S3 Amazon Simple Storage Service&#xff…

vue3中修改element plus 主题色

vue3中修改element plus 主题色,有两种方式 一、使用 :root 方式设置变量进行覆盖 1.1文件夹 styles 下新建一个 element-variarbles.scss文件 :root { –el-color-primary: red; } 1.2 main 文件中引入 import ‘element-plus/dist/index.css’ import ‘/styles/element…

苹果ios的系统app应用WebClip免签应用开源及方式原理

在移动设备上&#xff0c;为了方便访问我们经常使用的网站或服务&#xff0c;我们经常会希望将其添加到主屏幕上&#xff0c;以便快速启动。虽然我们可以通过使用浏览器书签实现这一目标&#xff0c;但添加一个图标到主屏幕上&#xff0c;使得它看起来与原生App无异&#xff0c…

为何开展数据清洗、特征工程和数据可视化、数据挖掘与建模?

1.2为何开展数据清洗、特征工程和数据可视化、数据挖掘与建模 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.2节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学…

一个最新国内可用的免费GPT4,Midjourney绘画网站+使用教程

一、前言 ChatGPT GPT4.0&#xff0c;Midjourney绘画&#xff0c;相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和用户进行创作交流。 然而&#xff0c;GPT-4对普…

MAC 系统在vs code中,如何实现自动换行

目录 问题描述&#xff1a; 问题解决&#xff1a; 问题描述&#xff1a; 在vscode中&#xff0c;有些时候&#xff0c;一行内容过多&#xff0c;如果不能自动换行&#xff0c;就需要拖动页面&#xff0c;才能看到完整的内容。如下图两行所示&#xff1a; 问题解决&#xff1a…

基于opencv和tensorflow实现人脸识别项目源码+可执行文件,采用python中的tkinter库做可视化

项目名称: 基于OpenCv和tensorflow的人脸识别 完整代码下载地址&#xff1a;基于OpenCv和tensorflow的人脸识别 环境配置: Pythontensorflow2OpenCv categories: 人工智能 description: Opencv是一个开源的的跨平台计算机视觉库&#xff0c;内部实现了图像处理和计算机视觉方…

2023 IoTDB 用户大会成功举办,深入洞察工业互联网数据价值

2023 年 12 月 3 日&#xff0c;中国通信学会作为指导单位&#xff0c;Apache IoTDB Community、清华大学软件学院、中国通信学会开源技术委员会联合主办&#xff0c;“科创中国”开源产业科技服务团和天谋科技&#xff08;北京&#xff09;有限公司承办的 2023 IoTDB 用户大会…

基于 Stereo R-CNN 的自动驾驶 3D 目标检测

论文地址&#xff1a;https://openaccess.thecvf.com/content_CVPR_2019/papers/Li_Stereo_R-CNN_Based_3D_Object_Detection_for_Autonomous_Driving_CVPR_2019_paper.pdf 论文代码&#xff1a;https://github.com/HKUST-Aerial-Robotics/Stereo-RCNN 论文背景 大多数 3D 物…

【开源】基于JAVA的APK检测管理系统

项目编号&#xff1a; S 038 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S038&#xff0c;文末获取源码。} 项目编号&#xff1a;S038&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 开放平台模块2.3 软…

MA营销自动化如何助力商家实现精准营销?

惟客数据 MAP 是一个跨渠道和设备的自动化营销平台&#xff0c;允许接触点编排个性化旅程&#xff0c;通过短信、社交推送等方式为您的客户创建无缝的个性化体验&#xff0c;加强客户关系并赢得忠诚度。可与惟客数据CDP 产品无缝配合使用&#xff0c;通过数据驱动做出更实时&am…

【WPF】解决无法对“xxx”类型的只读属性“xxx”进行TwoWay或OneWayToSource绑定

System.InvalidOperationException:“无法对“AowisingWincc.ViewModels.DialogScanDevicesViewModel”类型的只读属性“IOTGtatewayDeviceId”进行 TwoWay 或 OneWayToSource 绑定。” 这个异常是由于在进行数据绑定时&#xff0c;尝试将只读属性&#xff08;IOTGtatewayDevi…

【android开发-16】android中文件和sharedpreferences数据存储详解

1&#xff0c;文件读写方式的数据存储 下面是一个简单的示例&#xff0c;演示如何在Android中使用内部存储来保存和读取文件&#xff1a; 保存文件&#xff1a; try { String data "这是要保存的数据"; FileOutputStream fos openFileOutput("myFile"…

C#学习——高级篇

官方文档链接: https://learn.microsoft.com/zh-cn/dotnet/api 一、命名空间 作用&#xff1a;在同一个项目有两个或多个同名的类&#xff0c;为了解决命名冲突&#xff0c;从而引入了命名空间&#xff0c;用户可以根据需求在不同的命名空间中定义相同名字的类&#xff0c;它…

移动硬盘安装Linux系统Ubuntu18.04随插随用

移动硬盘安装Linux系统Ubuntu18.04随插随用 准备 硬盘&#xff1a;我的是三星SSD 1T大小&#xff0c;其中的400G用于ubuntu系统使用&#xff0c;余下用于普通的文件存储 U盘&#xff1a;普通的32G大小U盘&#xff0c;用于制作启动盘 步骤 1. 下载ubuntu镜像文件 ubuntu-18.…

亚马逊云科技Serverless视频内容摘要提取方案

概述 随着GenAI的普及&#xff0c;视频内容摘要生成成为一个备受关注的领域。通过将视频内容转化为文本&#xff0c;可以探索到更广泛的应用场景&#xff0c;其中包括&#xff1a; 视频搜索与索引&#xff1a;将视频内容转化为文本形式&#xff0c;可以方便地进行搜索和索引操作…

MATLAB——二维小波的多层重构

%% 学习目标&#xff1a;二维小波的多层重构 %% 案例1 clear all; close all; load woman.mat; Xind2gray(X,map); [C,S]wavedec2(X,3,db4); %二维小波的多层分解 S C(1:38*38)0; %将小波的近似系数设置为0 Ywaverec2(C,S,db4); %二维小波的多层…