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

效果:

前言:

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

问题:

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

issue地址:

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

html代码:

<el-tree
   ref="tree"
   :props="{
      label: 'Name',
      isLeaf: 'IsLeaf',
   }"
   :load="loadNode"
   lazy
   show-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', // 子级的 id
          OrgId: '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); // 拿到父级的 id
                if (node) {
                  // 这里是核心代码
                  node.indeterminate = true // indeterminate强制设置为半选
                }
              })
            }
          }
          if (v.Type === 2) {
            if (s.Id === v.RelationId) {
              selectKeys.push(v.RelationId);
            }
          }
        });
      });
      this.defaultCheckedKeys = selectKeys;
    },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入解读:如何解决微调扩散模型时微调数据集和训练数据集之间的差距过大问题?

Diffusion Models专栏文章汇总&#xff1a;入门与实战 前言&#xff1a;在微调扩散模型的时候经常会遇到微调数据集和训练数据集之间的差距过大&#xff0c;导致训练效果很差。在图像生成任务中并不明显&#xff0c;但是在视频生成任务中这个问题非常突出。这篇博客深入解读如何…

代码随想录算法训练营第69天:图论7[1]

代码随想录算法训练营第69天&#xff1a;图论7 109. 冗余连接II 卡码网题目链接&#xff08;ACM模式&#xff09;(opens new window) 题目描述 有向树指满足以下条件的有向图。该树只有一个根节点&#xff0c;所有其他节点都是该根节点的后继。该树除了根节点之外的每一个节…

5分钟读懂GPS-RTK实时动态技术,建议收藏!

由于”智慧工地“理念的兴起和发展&#xff0c;目前越来越多的企业将信息技术手段融合于施工现场安全管理&#xff0c;构建智能化的安全监管模式。基于此&#xff0c;蓝牙LORA融合定位技术、UWB超宽带定位技术、GPS-RTK定位技术等信息技术也越来越频繁出现在大众视野。然而&…

单片机软件架构连载(4)-结构体

枚举、指针、结构体&#xff0c;我愿称为C语言"三板斧"。 用人话来讲&#xff0c;几乎所有c语言高阶编程&#xff0c;都离不开这这3个知识点的应用。 今天站在实际产品常用的角度&#xff0c;给大家讲一下结构体。 1.结构体概念 结构体可以用来构建更复杂的数据结…

Diffusion模型的微调和引导

留意后续更新&#xff0c;欢迎关注微信公众号&#xff1a;组学之心 Diffusion模型的微调和引导 微调&#xff08;fine-tuning&#xff09;&#xff1a; 从一个已经训练过的模型开始训练&#xff0c;我们就可以从一个学会如何“去噪”的模型开始训练&#xff0c;相对于随机初始…

c++:动态内存变量

典型的C面向对象编程 元素 (1)头文件hpp中类的定义 (2)源文件cpp中类的实现&#xff08;构造函数、析构函数、方法&#xff09; (3)主程序 案例 (1)用C来编程“人一天的生活” (2)“人”的属性&#xff1a;name、age、male (3)“人”的方法&#xff1a;eat、work(coding/shop…

【免费可视化工具】助力风电行业智能化管理

在绿色能源日益成为全球共识的今天&#xff0c;风电作为清洁能源的重要组成部分&#xff0c;正以前所未有的速度发展。然而&#xff0c;随着风电场规模的扩大和数量的增加&#xff0c;如何高效、直观地管理和监控风电资源成为了一个亟待解决的问题。 而山海鲸可视化这款免费可…

汉光联创HGLM2200N黑白激光多功能一体机加粉及常见问题处理

基本参数&#xff1a; 机器型号&#xff1a;HGLM2200N 产品名称&#xff1a;A4黑白激光多功能一体机 基础功能&#xff1a;打印、扫描、复印 打印速度&#xff1a;22页/分钟 纸张输入容量&#xff1a;150-249页 单面支持纸张尺寸&#xff1a;A4、A5、A6 产品尺寸&#x…

功能详解-电商接口丨电商API

随着电商平台各类机制日益成熟&#xff0c;电商接口逐渐被大家所熟知&#xff0c;淘宝、天猫、京东、拼多多、抖店、快手、小红书这些都是主流的电商平台&#xff0c;为了提升电商管理系统的效率&#xff0c;开发者可以通过电商接口将多个电商平台的数据和功能集成。 电商接…

firewalld高级配置

一、1、关于iptables的知识 IP数据包过滤系统是一种功能强大的工具&#xff0c;可用于添加、编辑和除去规则&#xff0c;这些规则是做数据包过滤决定时&#xff0c;防火墙所遵循和组成的规则。这些规则存储在专用的数据包过滤表中&#xff0c;而这些表集成在Linux内核中。在数据…

二手物品交易小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;管理员管理&#xff0c;商品信息管理&#xff0c;论坛管理&#xff0c;收货地址管理&#xff0c;基础数据管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;商品信息&…

ESIX挂载usb移动硬盘或者优盘并拷贝原数据存储数据

1、esxi支持和不支持分区格式 ESXi 6.*系列默认不支持NTFS、exFAT等常见文件系统&#xff0c;fat32支持但没意义仅小文件可以用&#xff0c;不过可以通过一些额外步骤和第三方工具来访问NTFS格式的存储设备&#xff0c;但生产环境不推荐这样做&#xff0c;需要安装第三方包。 e…

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

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

中霖教育:税务师考试报名现有职称怎么写?

【中霖教育怎么样】】【中霖教育好吗】 报考税务师考试的考生在报名期间需要登录税务师职业资格考试网上报名系统填写报名信息。 税务师报名现有职称按照实际情况填写会计助理、会计或者会计主管&#xff0c;没有工作的考生在填写工作信息的时候填写待业即可。 在报名阶段&a…

Linux_进程池

目录 1、进程池基本逻辑 2、实现进程池框架 3、文件描述符的继承 4、分配任务给进程池 5、让进程池执行任务 6、回收子进程 7、进程池总结 结语 前言&#xff1a; 在Linux下&#xff0c;进程池表示把多个子进程用数据结构的方式进行统一管理&#xff0c;在任何时候…

MATLAB和Python发那科ABB库卡史陶比尔工业机器人模拟示教框架

&#x1f3af;要点 &#x1f3af;模拟工业机器人 | &#x1f3af;可视化机器人DH 参数&#xff0c;机器人三维视图 | &#x1f3af;绘制观察运动时关节坐标位置、速度和加速度 | &#x1f3af;绘制每个关节处的扭矩和力 | &#x1f3af;图形界面示教机器人 | &#x1f3af;工业…

通过9大步骤,帮助企业在数字化转型中搭建数据分析的报表体系!

引言&#xff1a;在数字化转型中&#xff0c;企业搭建数据分析的报表体系是一个系统性的过程&#xff0c;需要综合考虑业务需求、数据来源、技术平台等多个方面。此外从报表生命周期的角度来说&#xff0c;从产生、使用以及最后消亡退出体系&#xff0c;都需要通盘考虑&#xf…

[数据集][目标检测]轮椅检测数据集VOC+YOLO格式13826张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;13826 标注数量(xml文件个数)&#xff1a;13826 标注数量(txt文件个数)&#xff1a;13826 标…

remix测试文件测试智能合约

remix内其实也是可以通过编写测试文件来测试智能合约的&#xff0c;需要使用插件自动生成框架以及测试结果。本文介绍一个简单的HelloWorld合约来讲解 安装插件多重检测&#xff1a; &#xff08;solidity unit testing&#xff09; 编译部署HelloWorld合约 // SPDX-License-…

在线图片转文字的软件,分享3种强大的软件!

在信息爆炸的时代&#xff0c;图片作为信息的重要载体之一&#xff0c;其内容往往蕴含着巨大的价值。然而&#xff0c;面对海量的图片信息&#xff0c;如何高效、准确地将其转化为文字&#xff0c;成为了许多人的迫切需求。今天&#xff0c;就为大家盘点几款功能强大的在线图片…