当前位置: 首页 > 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;},

http://www.lryc.cn/news/392680.html

相关文章:

  • Java项目:基于SSM框架实现的高校共享单车管理系统分前后台【ssm+B/S架构+源码+数据库+开题报告+任务书+毕业论文】
  • 【Android】自定义换肤框架02之自定义AssetManager和Resource
  • 熵权法、熵值法、熵权TOPSIS三种方法的实用场景及优劣比较
  • 无人机人员搜救
  • 目标检测算法
  • SpringSecurity 三更草堂学习笔记
  • 鸿蒙生态应用开发白皮书V3.0
  • CSS - 深入理解选择器的使用方式
  • 动手学深度学习(Pytorch版)代码实践 -循环神经网络-54~55循环神经网络的从零开始实现和简洁实现
  • Python酷库之旅-第三方库Pandas(006)
  • 智慧矿山:EasyCVR助力矿井视频多业务融合及视频转发服务建设
  • Unix/Linux shell实用小程序1:生字本
  • springboot2.7.6 集成swagger
  • 面试篇-系统设计题总结
  • 如何摆脱反爬虫机制?
  • 68745
  • github仓库的基本使用-创建、上传文件、删除
  • [课程][原创]opencv图像在C#与C++之间交互传递
  • 科研绘图系列:R语言双侧条形图(bar Plot)
  • 计算机未来大方向的选择
  • AndroidKille不能用?更新apktool插件-cnblog
  • 非参数检测2——定义
  • iOS多target时怎么对InfoPlist进行国际化
  • TZDYM001矩阵系统源码 矩阵营销系统多平台多账号一站式管理
  • 你的 Mac 废纸篓都生苍蝇啦
  • 推出新的C2000™ F28P65x 实时微控制器,专为高效控制电力电子产品而构建(F28P650DH、F28P650DK、F28P650SH)
  • 使用Java实现分布式日志系统
  • Java 基础查漏补缺
  • 甲骨文首次将LLMs引入数据库,集成Llama 3和Mistral,和数据库高效对话
  • HumbleBundle7月虚幻捆绑包30件军事题材美术模型沙漠自然环境大逃杀模块化建筑可定制武器包二战现代坦克飞机道具丧尸士兵角色模型20240705