当前位置: 首页 > news >正文

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;},

相关文章:

  • Spring Cloud Gateway如何匹配某路径并进行路由转发
  • 时序(流式)图谱数据仓库AbutionGraph功能介绍-Streaming Graph OLAM Database
  • 【MySQL系列】隐式转换
  • JDK-SPI-服务提供者接口
  • Linux系统之安装Ninvaders太空入侵者小游戏
  • 大力出奇迹:大语言模型的崛起与挑战
  • 【前端项目笔记】9 数据报表
  • 使用AES加密数据传输的iOS客户端实现方案
  • 数据库MySQL学习笔记
  • C++实现简化 QtBase(4):增加简单实用的事件机制
  • Windows/Linux/Mac 系统局域网服务发现协议及传输速度比较
  • uniapp做小程序内打开地图展示位置信息
  • AOP切面、动态代理
  • springcloud-gateway 网关组件中文文档
  • c++11新特性-4-返回类型后置
  • [PHP内核探索]PHP中的哈希表
  • .pyc 想到的一些问题
  • 4. 路由到控制器 - Laravel从零开始教程
  • classpath对获取配置文件的影响
  • Effective Java 笔记(一)
  • Lsb图片隐写
  • maya建模与骨骼动画快速实现人工鱼
  • Spring声明式事务管理之一:五大属性分析
  • Wamp集成环境 添加PHP的新版本
  • webpack项目中使用grunt监听文件变动自动打包编译
  • 阿里云应用高可用服务公测发布
  • 从@property说起(二)当我们写下@property (nonatomic, weak) id obj时,我们究竟写了什么...
  • 讲清楚之javascript作用域
  • 解析带emoji和链接的聊天系统消息
  • 可能是历史上最全的CC0版权可以免费商用的图片网站
  • 区块链共识机制优缺点对比都是什么
  • 新手搭建网站的主要流程
  • 智能网联汽车信息安全
  • 400多位云计算专家和开发者,加入了同一个组织 ...
  • C# - 为值类型重定义相等性
  • CMake 入门1/5:基于阿里云 ECS搭建体验环境
  • ionic异常记录
  • 数据库巡检项
  • ​【已解决】npm install​卡主不动的情况
  • #android不同版本废弃api,新api。
  • #include到底该写在哪
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (附源码)计算机毕业设计SSM在线影视购票系统
  • (九)One-Wire总线-DS18B20
  • (四)搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (算法)Game
  • (一)C语言之入门:使用Visual Studio Community 2022运行hello world
  • (原創) 系統分析和系統設計有什麼差別? (OO)
  • (最完美)小米手机6X的Usb调试模式在哪里打开的流程
  • 、写入Shellcode到注册表上线
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  • .net 中viewstate的原理和使用
  • .NET企业级应用架构设计系列之应用服务器
  • /etc/sudoer文件配置简析