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;如在地图导航中为车辆、行人规划最优路线。游戏开发&…

算法刷题笔记 单调栈(C++实现)

文章目录 题目描述基本思路实现代码 题目描述 给定一个长度为N的整数数列&#xff0c;输出每个数左边第一个比它小的数&#xff0c;如果不存在则输出−1。 输入格式 第一行包含整数N&#xff0c;表示数列长度。第二行包含N个整数&#xff0c;表示整数数列。 输出格式 共一…

学会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 的设计具有很强的可读…

Spring Boot项目中使用MockMvc进行测试的详细指南

目录 MockMvc简介安装和配置基本用法高级用法集成测试测试最佳实践总结 MockMvc简介 MockMvc是Spring框架提供的一种用于测试Spring MVC控制器的工具。它允许开发者在不启动完整的Web服务器的情况下&#xff0c;模拟HTTP请求并验证响应。MockMvc的主要优点包括&#xff1a; …

免杀笔记 ---> 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设备可能需要不同的时钟极性…

java.lang.classnotfoundexception jakarta.xml.bind.jaxbexception java 17问题

解决 <dependency><groupId>jakarta.xml.bind</groupId><artifactId>jakarta.xml.bind-api</artifactId><version>4.0.2</version> </dependency>参考&#xff1a; Handling NoClassDefFoundError for JAXBException in Jav…

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

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

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

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

Python 学习之常用第三方库(五)

Python 常用第三方库 Python 是一门功能强大的编程语言&#xff0c;其生态系统中包含了许多优秀的第三方库&#xff0c;这些库极大地扩展了 Python 的功能。以下是一些常用的 Python 第三方库&#xff1a; 1. NumPy&#xff1a; a. 用于数值计算的库&#xff0c;提供了大量的…

科普文: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…

网关,路由器,交换机

一、网关 (Gateway) 是一种设备&#xff0c;用于连接不同网络&#xff0c;能够转发数据包并翻译协议&#xff0c;允许不同类型的网络通信。网关通常工作在OSI模型的应用层或传输层&#xff0c;提供连接和路由服务。 应用场景例子&#xff1a; 在企业网络中&#xff0c;网关可…

四倍体和六倍体小麦抗赤霉病的比较研究

核心总结&#xff1a;四倍体和六倍体小麦抗赤霉病的比较研究 研究背景 小麦赤霉病&#xff08;Fusarium head blight, FHB&#xff09;由Fusarium graminearum引起&#xff0c;是全球范围内对小麦生产造成严重威胁的疾病。FHB感染不仅会显著降低粮食产量和质量&#xff0c;还…

2024年能在一个月内录用的EI检索会议CCPQT 2024

第三届计算、通信、感知与量子技术国际会议&#xff08;CCPQT 2024&#xff09;将于2024 年10月25日-10月27日在中国珠海召开。&#xff08;往届均已顺利见刊检索&#xff09; 会议信息 大会官网&#xff1a;http://www.ccpqt.org/ 会议地点&#xff1a;中国珠海 会议时间&…

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

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

python之音频处理(1)语速快慢的改变

方案1&#xff1a;使用pydub 处理 from pydub import AudioSegment sound AudioSegment.from_file(r"D:\websiteDownload\我今天被一件事情搞得很烦.wav") print(sound.duration_seconds) rate 0.75 sound_with_altered_frame_rate sound._spawn(sound.raw_data,…