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.rhkb.cn/news/369784.html

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

相关文章

【C++题解】1561. 买木头

问题&#xff1a;1561. 买木头 类型&#xff1a;省赛、数组问题、二分答案、贪心、2015江苏省青少年信息学奥林匹克竞赛复赛 题目描述&#xff1a; 有 n 个木材供应商&#xff0c;每个供货商有长度相同一定数量的木头。长木头可以锯短&#xff0c;但短木头不能接长。有一个客…

解决obsidian加粗中文字体显示不突出的问题

加粗字体显示不突出的原因&#xff1a;默认字体的加粗版本本来就不突出 解决方法&#xff1a;改成显示突出的类型Microsoft YaHei UI 【效果】 修改前&#xff1a;修改后&#xff1a; 其他方法&#xff1a; 修改css&#xff08;很麻烦&#xff0c;改半天也不一定奏效&#…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【19】认证服务03—分布式下Session共享问题

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【19】分布式下Session共享问题 session原理分布式下session共享问题Session共享问题解决—session复制Session共享问题解决—客户端存储Session共享问题解决—hash一致性Session共享问题…

使用 OpenCV 和 Python 进行车道检测和物体检测(YOLO)

本项目旨在开发一个集车道检测与物体检测功能于一体的智能视觉分析系统&#xff0c;利用先进的计算机视觉技术和深度学习模型&#xff0c;实现实时的道路场景理解和目标识别。系统主要依托OpenCV这一强大的计算机视觉库&#xff0c;以及Python作为编程语言&#xff0c;融合了车…

Golang | Leetcode Golang题解之第206题反转链表

题目&#xff1a; 题解&#xff1a; func reverseList(head *ListNode) *ListNode {if head nil || head.Next nil {return head}newHead : reverseList(head.Next)head.Next.Next headhead.Next nilreturn newHead }

24西安电子科技大学马克思主义学院—考研录取情况

01、马克思主义学院各个方向 02、24马克思主义学院近三年复试分数线对比 PS&#xff1a;马院24年院线相对于23年院线增加15分&#xff0c;反映了大家对于马克思主义理论学习与研究的热情高涨&#xff0c;也彰显了学院在人才培养、学科建设及学术研究等方面的不断进步与成就。 6…

UE4_材质_材质节点_Fresnel

学习笔记&#xff0c;不喜勿喷&#xff0c;侵权立删&#xff0c;祝愿生活越来越好&#xff01; 一、问题导入 在创建电影或过场动画时&#xff0c;你常常需要想办法更好地突显角色或场景的轮廓。这时你需要用到一种光照技术&#xff0c;称为边沿光照或边缘光照&#xff0c;它的…

爬虫笔记19——代理IP的使用

访问网站时IP被阻止 有些网站会设置特定规则来限制用户的访问&#xff0c;例如频率限制、单一账户多次登录等。 网站为了保护自身安全和用户体验&#xff0c;会设置防御机制&#xff0c;将涉嫌恶意行为的IP地址加入黑名单并屏蔽访问。如果用户在使用网站时违反了这些规则&…

elementPlus表格二次封装

为何要对element-plus表格进行二次封装&#xff1f; 我们正常在开发项目中&#xff0c;表格的风格是一致的&#xff0c;但是表格或多或少会有些不同&#xff0c;有些是需要分页&#xff0c;有些是按钮功能不同&#xff0c;有些又需要加Tag&#xff0c;或者对时间进行格式化等。…

高阶算法班从入门到精通之路课程

本课程旨在帮助学员深入理解算法与数据结构的核心概念&#xff0c;从而掌握高级算法设计与分析技能。每集课程内容精心设计&#xff0c;涵盖了常用数据结构、经典算法及其应用场景等方面的深度讲解&#xff0c;同时通过大量实例演练&#xff0c;帮助学员提升解决实际编程难题的…

Vue2基础

目录 一、初识Vue 二、Vue模板语法({{}} / v-bind) 三、数据绑定(v-model) 四、el与data的两种写法 五、MVVM模型 六、数据代理 1、Object.defineProperty 2、Vue中的数据代理 七、事件处理(v-on: / ) 1、事件的基本使用 2、事件修饰符 3、键盘事件 4、总结 八、计…

如何在Qt使用uchardet库

如何在 Qt 中使用 uchardet 库 文章目录 如何在 Qt 中使用 uchardet 库一、简介二、uchardet库的下载三、在Qt中直接调用四、编译成库文件后调用4.1 编译工具下载4.2 uchardet源码编译4.3 测试编译文件4.4 Qt中使用 五、一些小问题5.1 测试文件存在的问题5.2 uchardet库相关 六…

【启明智显分享】乐鑫HMI方案2.8寸触摸串口屏应用于太阳能控制器

前言 太阳能作为一种无尽的、可再生的能源&#xff0c;在现代社会的能源结构中占据着日益重要的地位。而在太阳能应用系统中&#xff0c;有一种设备是不可或缺的&#xff0c;那就是太阳能控制器。太阳能控制器在太阳能系统中起着至关重要的作用&#xff0c;它保证系统的安全和…

uniapp 数据父传子

文章目录 可能出现的问题 在uni-app中&#xff0c;父组件向子组件传递数据主要通过属性绑定的方式实现。这里提供一个简单的示例来说明如何进行父传子的数据传递&#xff1a; 父组件 准备数据: 在父组件的data中定义要传递的数据。 export default {data() {return {parentMe…

Spring解耦合分析和总结

在我们的日常开发中&#xff0c;创建对象的操作随处可见以至于对其十分熟悉的同时又感觉十分繁琐&#xff0c;每次需要对象都需要亲手将其new出来&#xff0c;甚至某些情况下由于坏编程习惯还会造成对象无法被回收&#xff0c;这是相当糟糕的。但更为严重的是&#xff0c;我们一…

Java+前后端分离架构+ MySQL8.0.36产科信息管理系统 产科电子病历系统源码

Java前后端分离架构 MySQL8.0.36产科信息管理系统 产科电子病历系统源码 产科信息管理系统—住院管理 数字化产科住院管理是现代医院管理中的重要组成部分&#xff0c;它利用数字化技术优化住院流程&#xff0c;提升医疗服务质量和效率。以下是对数字化产科住院管理的详细阐述…

Keepalived+HAProxy 集群及虚IP切换实践

1、软件介绍 ①Keepalived keepalive是一个用c语言编写的路由软件&#xff0c;这个项目的主要目标是为Linux系统和基于Linux的基础设施提供简单而健壮的负载平衡和高可用性设施。负载均衡框架依赖于众所周知且广泛使用的Linux Virtual Server (IPVS)内核模块提供第4层负载均衡…

【音视频 | RTSP】RTSP协议详解 及 抓包例子解析

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

maven-surefire-report-plugin插件生成测试报告

目录 官网 pom.xml配置 测试类 执行测试结果 修改测试类 pom文件更改配置maven-jxr-plugin xref xref-test ​Source Xref​ ​Test Source Xref​ 再此验证 有凭&#xff08;有理&#xff09;有据 官网 Maven Surefire Report Plugin – Showing Only Fail…

2024 年第十四届 APMCM 亚太地区大学生数学建模竞赛B题超详细解题思路+数据预处理问题一代码分享

B题 洪水灾害的数据分析与预测 亚太中文赛事本次报名队伍约3000队&#xff0c;竞赛规模体量大致相当于2024年认证杯&#xff0c;1/3个妈杯&#xff0c;1/10个国赛。赛题难度大致相当于0.6个国赛&#xff0c;0.8个妈杯。该比例仅供大家参考。 本次竞赛赛题难度A:B:C3:1:4&…