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

news/2024/10/5 10:54:27/

效果:

前言:

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

问题:

当你设置了默认选中的子节点,但是由于刚进入页面此时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.ppmy.cn/news/1473606.html

相关文章

【十三】图解 Spring 核心数据结构:BeanDefinition 其二

图解 Spring 核心数据结构&#xff1a;BeanDefinition 其二 概述 前面写过一篇相关文章作为开篇介绍了一下BeanDefinition&#xff0c;本篇将深入细节来向读者展示BeanDefinition的设计&#xff0c;让我们一起来揭开日常开发中使用的bean的神秘面纱&#xff0c;深入细节透彻理解…

Linux系统的基础知识和常用命令

1、什么是Linux&#xff1f; 是一种免费使用和自由传播的类UNIX操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦兹于1991年10月5日首次发布&#xff0c;它主要受到Minix和Unix思想的启发&#xff0c;是一个基于POSIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行…

3个让你爽到爆炸的学习工具

We OCR WeOCR 是一个基于浏览器的文字识别工具&#xff0c;用户可以通过上传图片来识别其中的文本信息。它是一个渐进式网络应用程序&#xff08;PWA&#xff09;&#xff0c;可以在浏览器中离线使用。WeOCR 是开源的&#xff0c;并且基于 Tesseract OCR 引擎开发。用户无需在本…

R语言进行卡方拟合优度检验

x_before<- 0:5 f_before<-c(35,40,19,3,2,1) lambda<-mean(rep(x_before,f_before))#计算样本均值 n<-sum(f_before)#样本量x_after<-0:3 f_after<-c(f_before[1:3],f_before[4]f_before[5]f_before[6])#合并最后三个频数pp<-dpois(0:2,lambda) pp[4]<…

第二节-K8s词汇表

关键字词汇表 https://kubernetes.io/zh-cn/docs/reference/glossary/?fundamentaltrue API Group (API 组)Kubernetes API 中的一组相关路径。 API 服务器亦称作:kube-apiserver API 服务器是 Kubernetes 控制平面的组件&#xff0c; 该组件负责公开了 Kubernetes API&…

欢迎加入国家智能网联汽车创新中心OS开发训练营大家庭

欢迎加入国家智能网联汽车创新中心OS开发训练营大家庭。&#x1f680; 导学阶段启动 在正式开营之前&#xff0c;我们特别设置了导学阶段&#xff0c;旨在帮助大家更好地迎接颇具挑战性的项目实战。导学阶段包括一系列精心准备的视频课程和配套习题。github链接&#xff1a;htt…

VUE2及其生态查漏补缺

1、数据代理概括 数据代理过程相当于是进行了 vm 代理 vm_data中的属性&#xff0c;vm._data 是与 我们vue文件中写的 data是全等的 //创建Vue实例let data { //data中用于存储数据&#xff0c;数据供el所指定的容器去使用&#xff0c;值我们暂时先写成一个对象。name:atguig…

如何处理 PostgreSQL 中由于表连接顺序不当导致的性能问题?

文章目录 一、理解表连接和连接顺序二、识别由于表连接顺序不当导致的性能问题三、影响表连接顺序的因素四、解决方案手动调整连接顺序创建合适的索引分析数据分布和优化查询逻辑 五、示例分析手动调整连接顺序创建索引优化查询逻辑 六、总结 在 PostgreSQL 中&#xff0c;表连…