element-ui Tree之懒加载叶子节点强制设置父级半选效果

效果:

前言:

我们是先只展示一级的,二级的数据是通过点击之后通过服务器获取数据,并不是全量数据直接一起返回回来的。

问题:

当你设置了默认选中的子节点,但是由于刚进入页面此时tree中数据暂是没有这个子节点时,其父节点并不会具有半选效果

issue地址:

[Feature Request] tree components support setHalfCheckedNodes and setHalfCheckedkeys · Issue #13500 · ElemeFE/element · GitHub

html代码:

<el-treeref="tree":props="{label: 'Name',isLeaf: 'IsLeaf',}":load="loadNode"lazyshow-checkbox:filter-node-method="filterNode"node-key="Id":default-checked-keys="defaultCheckedKeys"@check-change="handleCheckChange"
></el-tree>

需要回显数据:

selectDoctorInfo: [{Type: 1,RelationId: '68d5d334-4eff-4cf4-8152-fa6a45546dae', // 子级的 idOrgId: 'bbdcbc14-290f-43f6-91d9-fd31529dbec3', // 父级的 id},{Type: 1,RelationId: '08478d81-9582-4151-9288-fca71beb43fb',OrgId: 'bbdcbc14-290f-43f6-91d9-fd31529dbec3',},{Type: 2,RelationId: '63daa04f-be13-481a-8e5e-6160fee89203',OrgId: '63daa04f-be13-481a-8e5e-6160fee89203',},]

核心代码:

onEchoTreeData() {// 接口返回已选择的数据  allHospitalList: 一级的全部数据  selectDoctorInfo: 需要回显的数据 const selectKeys = [];this.selectDoctorInfo.forEach((v) => {this.allHospitalList.forEach((s) => {if (v.Type === 1) {if (s.Id === v.OrgId) {selectKeys.push(v.RelationId);this.$nextTick(() => {var node = this.$refs.tree.getNode(v.OrgId); // 拿到父级的 idif (node) {// 这里是核心代码node.indeterminate = true // indeterminate强制设置为半选}})}}if (v.Type === 2) {if (s.Id === v.RelationId) {selectKeys.push(v.RelationId);}}});});this.defaultCheckedKeys = selectKeys;},

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

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

相关文章

A*——AcWing 179. 八数码

A* 定义 A* 算法是一种在图形或地图中寻找最短路径的启发式搜索算法。它通过综合考虑起始节点到当前节点的实际代价和当前节点到目标节点的预估代价&#xff0c;来决定下一步的搜索方向。 运用情况 路径规划&#xff1a;如在地图导航中为车辆、行人规划最优路线。游戏开发&…

学会python——用python制作一个登录和注册窗口(python实例十八)

目录 1.认识Python 2.环境与工具 2.1 python环境 2.2 Visual Studio Code编译 3.登录和注册窗口 3.1 代码构思 3.2 代码实例 3.3 运行结果 4.总结 1.认识Python Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的可读…

免杀笔记 ---> PE

本来是想先把Shellcode Loader给更新了的&#xff0c;但是涉及到一些PE相关的知识&#xff0c;所以就先把PE给更了&#xff0c;后面再把Shellcode Loader 给补上。 声明&#xff1a;本文章内容来自于B站小甲鱼 1.PE的结构 首先我们要讲一个PE文件&#xff0c;就得知道它的结构…

SPI四种模式--极性与相位

SPI的四种模式&#xff1a;相位和极性 极性 定义时钟空闲状态&#xff1a; CPOL0&#xff1a;时钟线在空闲状态为低电平 CPOL1&#xff1a;时钟线在空闲状态为高电平 这个设置决定了设备不进行通信时时钟线的状态。 兼容性&#xff1a; 不同的SPI设备可能需要不同的时钟极性…

【Linux开发实战指南】基于TCP、进程数据结构与SQL数据库:构建在线云词典系统(含注册、登录、查询、历史记录管理功能及源码分享)

目录 项目演示&#xff1a; 1. 主界面 技术讲解&#xff1a; TCP连接 进程的并发 链表 SQLite3 IO对文件的读写 功能实现 实现逻辑 我遇到的问题&#xff1a; 服务器端代码思路解析 必要条件 步骤详解 客户端代码思路解析 步骤详解 服务器源码如下&#xff1a;…

windows电脑如何运行python的定时任务

这里需要使用&#xff1a;windows系统设置-控制面板里的计划任务 1.打开计划任务之后&#xff0c;选择&#xff1a;创建基本任务 2.填写名称&#xff0c;这里根据自己具体的项目需求填写&#xff0c;然后点击下一步。 3.选择每日&#xff0c;再点击下一步 4.设置时间&…

科普文:linux I/O原理、监控、和调优思路

Linux 文件系统 磁盘和文件系统的关系&#xff1a; 磁盘为系统提供了最基本的持久化存储。 文件系统则在磁盘的基础上&#xff0c;提供了一个用来管理文件的树状结构。 文件系统工作原理 索引节点和目录项 文件系统&#xff0c;本身是对存储设备上的文件&#xff0c;进行…

多维度多场景文档门户,鸿翼ECM文档云打造文档管理新范式

​在现代企业运营中&#xff0c;内容协作的效率直接影响到组织的整体表现和竞争力。传统的文档管理系统都是通过目录结构的方式进行文件管理&#xff0c;在实际业务中无法满足用户多视角、多维度、多场景的文档业务需求。因此&#xff0c;搭建结合文档体系的业务门户是许多企业…

策略模式入门:基本概念与应用

目录 策略模式策略模式结构策略模式应用场景策略模式优缺点练手题目题目描述输入描述输出描述题解 策略模式 策略模式&#xff0c;又称政策模式&#xff0c;是一种行为型设计模式&#xff0c;它能让你定义一系列算法&#xff0c;并将每种算法分别放入独立的类中&#xff0c;以…

数字研发·驱动变革 | 2024达索系统装备行业数字化研发专题研讨会成功举办

2024年6月28日&#xff0c;由百世慧举办的“数字研发驱动变革|2024达索系统装备行业数字化研发专题研讨会”在达索系统&#xff08;重庆&#xff09;智能制造创新中心成功举办。 随着全球制造业向着智能化、数字化转型&#xff0c;我国工业装备行业也面临着转型升级的压力和机遇…

Gym cuda error: invalid resource handle

gym模拟的时候&#xff0c; 出现问题&#xff1a; sim和gym的定义如下&#xff1a; from isaacgym import gymapi,gymtorch import math,random# 1. Simulation Setup gym gymapi.acquire_gym()# get default set of parameters sim_params gymapi.SimParams() sim_params.u…

企业多存储方式如何兼顾安全统一管理、便捷流畅访问的双向需求?

数据和文件存储是企业最基础的需求&#xff0c;常见的存储方式有磁盘存储、NAS存储、SAN存储、云存储、分布式存储、闪存存储等&#xff1b;随着企业规模的扩大、业务结构的复杂化&#xff0c;企业内部可能会同时出现多种存储方式、多个存储设备并行使用的情况。 这样的使用场景…

【启明智显技术分享】Model3C芯片电阻屏RTP配置、调试与测试指南

一、背景 本指南将详细介绍启明智显的Model3C芯片电阻屏RTP配置、调试与测试指南。无论您是电子爱好者、开发者还是工程师&#xff0c;这份指南都能助您快速上手并充分利用这款触摸屏的各项功能。 二、芯片介绍 Model3C是一款基于RISC-V的高性能、国产自主、工业级高清显示与…

面试篇-系统设计题总结

这里记录一些有趣的系统设计类的题目&#xff0c;一般大家比较喜欢出的设计类面试题目会和高可用系统相关比如秒杀和抢红包等。欢迎大家在评论中评论自己遇到的题目&#xff0c;本篇文章会持续更新。 1、设计一个抢红包系统 抢红包系统其实也是秒杀类中的一个场景&#xff0…

类的动态加载-双亲委派模型

java反射基础 Java 基础 - 反射机制详解 | Java 全栈知识体系 (pdai.tech) 类的动态加载 参考链接&#xff1a;类的动态加载 构造是和实例化也就是对象相关的。 静态代码块是在初始化的时候就调用的 Class.forName();就会调用静态代码块 forName&#xff0c;加载类时默认…

你们叫AI,我们叫DI

大家好&#xff0c;才是真的好。 最近Notes/Domino产品在做哪些更新&#xff0c;想必大家都很好奇。 从2022年年末到现在&#xff0c;快两年了&#xff0c;任何一个有追求的大企业或巨头&#xff0c;应该都在追求实现一件事情&#xff1a;AI人工智能。 从小道消息来看&#…

【高级篇】分区与分片:MySQL的高级数据管理技术(十三)

引言 在上一章,我们探讨了MySQL的主从复制与高可用性,这是构建健壮数据库架构的基石。现在,让我们深入到更高级的主题——分区与分片,这些技术对于处理大规模数据集和提升数据库性能至关重要。我们将详细介绍表分区的概念、类型及分片技术的应用,为下一章讨论MySQL集群与…

解决Vue3中路由页面跳转出现白屏,刷新页面之后展示正常的问题

遇到这个问题&#xff0c;首先需要检查根组件标签最外层是否包含了个最大的div盒子来包裹内容。如下图所示&#xff1a; 我的项目就是因为没有将两块内容放到一个大盒子里面&#xff0c;所以才会出现白屏的问题。然后我去查了相关的资料&#xff0c;了解到这个问题是Vue组件渲染…

TSINGSEE智能分析网关V4人员区域徘徊AI检测:算法原理介绍及技术应用场景

一、引言 在现代社会&#xff0c;随着科技的不断发展&#xff0c;视频监控系统已广泛应用于各个领域&#xff0c;如公共安全、商业管理、交通监控等。其中&#xff0c;区域徘徊检测算法作为一种重要的视频分析技术&#xff0c;能够有效地识别出特定区域内人员的徘徊行为&#…

Spring Cloud Alibaba - Sentinel 分布式系统流量哨兵

目录 概述特征基本概念 安装Sentinel微服务引入Sentinel案例流控规则&#xff08;流量控制&#xff09;流控模式-直接流控模式-关联流控模式-链路流控效果-快速失败流控效果-预热WarmUp流控效果-排队等候 流控规则&#xff08;并发线程数控制&#xff09;熔断规则&#xff08;熔…