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

news2024/12/24 18:06:16

效果:

前言:

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

问题:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

每日一练:攻防世界:Hidden-Message

追踪UDP数据流&#xff0c;没有任何隐藏信息&#xff1a; WP&#xff1a; 观察流量包 每个流的唯一的区别就是UDP的源地址srcport的最后一位在变化 都提取出来就是二进制序列 用tshark提取一下 //使用tshark过滤出源端口&#xff0c;使用cut裁取端口的最后一位 tshark -r 8…

SSM学生资助管理系统-计算机毕业设计源码30825

目 录 摘 要 1 绪论 1.1 研究背景 1.2研究意义 1.3论文结构与章节安排 2 学生资助管理系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 2.4 …

室内效果图渲染要多久?

效果图的渲染时间并非固定&#xff0c;一张效果图的渲染时间可能从几分钟到几小时不等&#xff0c;甚至对于非常复杂和高质量的渲染任务&#xff0c;可能需要几天的时间。影响效果图渲染时间的因素有很多&#xff0c;今天就给大家介绍一下。 电脑配置 一、电脑配置 CPU和GPU…

牛客小白月赛97 (个人题解)(待补完)

前言&#xff1a; 前天晚上写的一场牛客上比赛&#xff0c;虽然只写出了三道&#xff0c;但比起之前的成绩感觉自己明显有了一点进步了&#xff0c;继续努力吧&#xff0c; 正文&#xff1a; 链接&#xff1a;牛客小白月赛97_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞…

TCP粘包解决方法

一. 产生原因及解决方法 产生原因&#xff1a;TCP是面向连接、基于字节流的协议&#xff0c;其无边界标记。当服务端处理速度比不其接收速度时&#xff0c;就很容易产生粘包现象。 解决方法&#xff1a;目前主要有两种解决方法&#xff0c;一个是在内容中添加分割标识&#xf…

记录问题:解决vscode找不到Python自定义模块,报错No module named ‘xxx‘

1. 背景 我非要用vscode&#xff0c;不用pycharm&#xff0c;哼&#xff01; 2. 问题 由于 import xx 自定义的模块&#xff0c; python run 的时候会报错 No module named ‘xxx‘ 报错信息&#xff1a; Traceback (most recent call last):File "d:\work\sf_financ…

Pharmacy Management System v1.0 文件上传漏洞(CVE-2022-30887)

前言 CVE-2022-30887 是一个存在于 Pharmacy Management System v1.0 中的远程代码执行&#xff08;RCE&#xff09;漏洞。这个漏洞存在于 /php_action/editProductImage.php 组件中。攻击者可以通过上传一个精心制作的图像文件来执行任意代码。 漏洞详细信息 漏洞描述: Pha…

通过升级nginx完美修复nginx相关漏洞

目录 前言1 安全评估报告的漏洞信息1.1 nginx漏洞概况1.2 nginx漏洞详细信息1.3 安装的软件信息 2 问题分析3 Nginx从1.18版本升级到1.26版本的步骤与说明3.1 查看现有Nginx配置参数3.2 下载新版本Nginx3.3 配置新版本Nginx3.4 编译新版本Nginx3.5 备份旧版本Nginx的二进制文件…

java 基础之 反射技术_java 程序src阶段 class对象阶段 run阶段3个阶段

System.out.println(in); } publicClass[] aa1(String name, int[] password){ returnnew Class[]{String.class} ; } privatestatic void aa1(int num){ System.out.println(num“静态方法”); } public static void main(String[] args){ System.out.println(“main”…

css实现一个三角形

实现不用方向的三角形可根据border进行设置。具体代码如下&#xff1a; .triangle-up {width: 0;height: 0;border-top: 10px solid transparent;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid black;}.triangle-rig…

RuoYi-Cloudv3.6.4使用教程【2】新增子模块_使用代码生成功能,创建功能页面

目录 准备工作修改代码生成的配置信息ry-cloud中创建表 代码生成使用导入对应表代码生成代码放置菜单 启动新增模块创建数据库创建表创建配置文件_新增的模块新增logback.xml新增banner添加路由启动项目 ✨接新增子模块&#xff0c;让子模块运行起来&#xff0c;还没创建模块的…

【ROS中Cjson文件的作用】

在ROS (Robot Operating System) 中&#xff0c;.json 文件通常用于存储配置信息、数据序列化或者在某些情况下用于网络通信和数据交换。JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于…

git上传文件

git init git add . git commit -m " " git remote add origin 仓库的地址 git push -u origin master 如果出现以下问题 可以用这一句强制上传 git push -f origin master

ValidateAntiForgeryToken、AntiForgeryToken 防止CSRF(跨网站请求伪造)

用途&#xff1a;防止CSRF&#xff08;跨网站请求伪造&#xff09;。 用法&#xff1a;在View->Form表单中: aspx&#xff1a;<%:Html.AntiForgeryToken()%> razor&#xff1a;Html.AntiForgeryToken() 在Controller->Action动作上&#xff1a;[ValidateAntiForge…

部署redis集群哨兵模式

部署redis集群哨兵模式 前言主要功能工作机制 一、虚拟机部署1、安装2、改配置1、redis.conf2、sentinel.conf3、起服务4、停redis-server服务&#xff0c;验证sentinel 3、脚本1. sentinel notification-script2. sentinel reconfig-script3. sentinel client-reconfig-script…

Centos Nginx SSL 配置

Nginx 配置 SSL 1.下载SSL证书 .crt 和 .key文件 2.创建和上传证书 mkdir -p /etc/nginx/cert 上传证书3.nginx.conf配置 # For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Docum…

策略模式入门:基本概念与应用

目录 策略模式策略模式结构策略模式应用场景策略模式优缺点练手题目题目描述输入描述输出描述题解 策略模式 策略模式&#xff0c;又称政策模式&#xff0c;是一种行为型设计模式&#xff0c;它能让你定义一系列算法&#xff0c;并将每种算法分别放入独立的类中&#xff0c;以…

【开发笔记】如何用正则匹配出百度云盘分享链接的提取码和链接?

用Wordpress做下载站&#xff0c;需要复制网盘链接到后台的文章发布自定义字段&#xff0c;然后我不想每次手动拆分链接和提取码分别到两个input&#xff0c;就想在后台粘帖时候实现拆分它。 $link 链接&#xff1a;https://pan.baidu.com/s/16y9Z5mTSE6gewStGDNndNQ 提取码…

万字长文MySQL Binlog 详细指南

目录 第一阶段 MySQL Binlog 基础用法1. Binlog基本概念1.1 什么是Binlog1.2 Binlog的作用1.3 Binlog格式 2. 配置和管理Binlog2.1 开启Binlog2.2 设置Binlog文件大小和保留时间2.3 查看Binlog状态 3. Binlog的实际应用3.1 数据恢复3.2 主从复制3.3 审计 4. Binlog工具使用4.1 …

数据库表导出到excel:前置知识1 ALL_TAB_COLS

ALL_TAB_COLS 当前用户可访问的表、视图和群集的列的相关信息 其中几个字段: OWNER&#xff1a;表&#xff0c;视图及群集的Owner   TABLE_NAME&#xff1a; 表&#xff0c;视图及聚簇的名称   COLUMN_NAME&#xff1a; 字段名   DATA_TYPE &#xff1a;字段的数据类型…