如何在el-tree懒加载并且包含下级的情况下进行数据回显-02

news2024/11/18 7:45:03

上一篇文章如何在el-tree懒加载并且包含下级的情况下进行数据回显-01对于el-tree懒加载,包含下级的情况下,对于回显提出两种方案,第一种方案有一些难题无法解决,我们重点来说说第二种方案。
第二种方案是使用这个变量对其是否全选,是否半选进行赋值回显的,那么怎么通过这个变量对全选还有半选进行回显的呢?

nodesMap: {
  "01": { checked: false, indeterminate: true, name: "总行" },
  "0101": { checked: false, indeterminate: true, name: "测试0101" },
  "0102": { checked: true, name: "测试0102" },
  "010101": { checked: true, indeterminate: true, name: "测试010101" },
},
loadNode(node, resolve) {
  // 处理回显主要是通过,store里面的nodesMap,nodesMap是一个对象,里面的键是id,值是id对应的node节点信息,包括是否全选checked, indeterminate
  this.nodeStore = node.store || {};
  if (this.orgPower) {
    new Promise((_resolve) =>
      _resolve({
        data: {
          name: "总行",
          orgRefno: "01",
        },
      })
    ).then((res) => {
      this.orgPower = false;
      this.powerOrgPk = res.data.orgRefno
      resolve([res.data])
      // 这里主要通过nodesMap来处理没有懒加载数据的回显
      // 这里一定要在reslove方法执行后,进行赋值
      if (
        this.nodesMap[res.data.orgRefno] &&
        node.store.nodesMap[res.data.orgRefno]
      ) {
        node.store.nodesMap[res.data.orgRefno].checked =
          this.nodesMap[res.data.orgRefno].checked;
        node.store.nodesMap[res.data.orgRefno].indeterminate =
          this.nodesMap[res.data.orgRefno].indeterminate;
      }
      return;
    });
  } else {
    new Promise((_resolve) =>
      _resolve(this.handleNodeData(node.data.orgRefno))
    ).then((res) => {
      const { data = [] } = res;
      
      resolve(res.data);
      let num = 0;
      data.forEach((item) => {
        // 这里主要是通过 nodesMap来处理没有懒加载数据的回显
        if (
          this.nodesMap[item.orgRefno] &&
          node.store.nodesMap[item.orgRefno]
        ) {
          // 回显全选
          node.store.nodesMap[item.orgRefno].checked =
            this.nodesMap[item.orgRefno].checked;
          // 回显半选
            node.store.nodesMap[item.orgRefno].indeterminate =
              this.nodesMap[item.orgRefno].indeterminate;
          if (
             node.store.nodesMap[item.orgRefno].checked ||
            node.store.nodesMap[item.orgRefno].indeterminate
          ) {
            num++;
          }
        }
      });
      node.indeterminate = num > 0 && num !== data.length
      if (node.indeterminate) {
        let parent =
          node.store.nodesMap[node.data.orgRefno] &&
          node.store.nodesMap[node.data.orgRefno].parent;
        while (parent) {
          parent.indeterminate = true;
          parent = parent.parent;
        }
      }
      return;
    });
  }
},

el-tree的基本数据都存放到store中,我们只要强制改变一下store中的数据,在el-tree的内部,会根据store中的数据对标识进行回显,我们调用的loadNode方法,其实调用的是el-tree源码中的load方法,

this.root = new Node({
  data: this.data,
  store: this
});
if (this.lazy && this.load) {
  const loadFn = this.load;
  // 第二个参数,就是在调用resolve方法
  loadFn(this.root, (data) => {
    // 这里是增加数据
    this.root.doCreateChildren(data);
    this._initDefaultCheckedNodes();
  });
 }

resolve方法是在root底层添加数据,形成层联关系,所以我们要在resolve方法执行后,进行回显,loadNode的第一个参数,实际上对应的源码里面的this.root,root是Node的实例,el-tree每个节点都可以看成是一个Node实例,所以this.root可以看成是所有数据的存储,里面的store属性极为重要,store属性里面的nodesMap包含了我们所有已经展开了的数据,
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
nodesMap其实是一个对象,key是已经展开数据的id,value是node信息,所有我们的思路就是等数据加载完成(resolve调用结束),此时reslove的数据对应的node已经生成,改变value里面的checked和indeterminate就可以实现多选,半选的回显,这里需要特别注意,一定要在reslove函数执行完成之后,在进行回显。否则会不起作用。
基本思路有了之后,在实现的过程中,肯定会遇到各种各样的问题,结合el-tree的源码把这些问题再一步一步解决,我觉得对于我来说,这个过程成长是巨大的。所以下一篇我想写的是我是怎么一步一步去解决这些问题。

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

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

相关文章

ScalableMap

问题引入 传统方案在处理线性地图元素时忽略了其结构性约束,建图距离太近 方法 简介 结构引导BEV特征提取 一种新的层次稀疏地图表示方法 设计渐进解码机制和基于此表示的监督策略 组件 结构引导BEV表征 通过车载摄像头捕捉的环绕视图图像,利用Res…

tamarin运行

首先我们找到安装tamarin的文件位置,找到以后进入该文件夹下 ubuntuubuntu:~$ sudo find / -name tamarin-prover /home/linuxbrew/.linuxbrew/var/homebrew/linked/tamarin-prover /home/linuxbrew/.linuxbrew/Cellar/tamarin-prover /home/linuxbrew/.linuxbrew/…

数据结构【DS】图的基本概念

定义 完全图(简单完全图) 完全无向图:边数为𝐧𝐧−𝟏𝟐完全有向图:边数为 𝐧(𝐧−𝟏) 子图、生成子图 G的子图:所有的顶点和边都属于图G的图 G的生成子图…

五个必知的速率限制策略,以最大化流量流动

速率限制是一种策略,我们在工作中常常使用,它定义了系统在设定的时间框架内可以处理的最大请求数量。 速率限制定义了系统在指定时间段内可以处理的最大请求数量。 Image.png 速率限制是一种策略,我们在工作中常常使用,它定义了…

【IPC】消息队列

1、IPC对象 除了最原始的进程间通信方式信号、无名管道和有名管道外,还有三种进程间通信方式,这 三种方式称之为IPC对象 IPC对象分类:消息队列、共享内存、信号量(信号灯集) IPC对象也是在内核空间开辟区域,每一种IPC对象创建好…

【开源】基于Vue.js的在线课程教学系统的设计和实现

项目编号: S 014 ,文末获取源码。 \color{red}{项目编号:S014,文末获取源码。} 项目编号:S014,文末获取源码。 目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2…

【Feign】 基于 Feign 远程调用、 自定义配置、性能优化、实现 Feign 最佳实践

🐌个人主页: 🐌 叶落闲庭 💨我的专栏:💨 SpringCloud MybatisPlus JVM 石可破也,而不可夺坚;丹可磨也,而不可夺赤。 Feign 一、 基于 Feign 远程调用1.1 RestTemplate方式…

MySQL 教程 1.1

MySQL 教程1.1 MySQL 是最流行的关系型数据库管理系统,在 WEB 应用方面 MySQL 是最好的 RDBMS(Relational Database Management System:关系数据库管理系统)应用软件之一。 在本教程中,会让大家快速掌握 MySQL 的基本知识,并轻松…

数字IC前端学习笔记:异步复位,同步释放

相关阅读 数字IC前端https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 异步复位 异步复位是一种常见的复位方式,可以使电路进入一个可知的状态。但是不正确地使用异步复位会导致出现意想不到的错误,复位释放便是…

分组表,分桶表

1,启动Hive服务 (1)启动HiveServer2服务 nohup hive --service metastore &(2)启动Metastore服务 nohup hive --service hiveserver2 &(3)查看进程信息 lsof -i:100002,…

hologres 索引与查询优化

hologres 优化部分 1 hologres 建表优化1.1 建表中的配置优化1.1 字典索引 dictionary_encoding_columns1.2 位图索引 bitmap_columns1.2.2 Bitmap和Clustering Key的区别 1.3 聚簇索引Clustering Key 1 hologres 建表优化 1.1 建表中的配置优化 根据 holo的 存储引擎部分的知…

公共字段自动填充-@TableField的fill实现(2)

TheadLocal 客户端发送的每次http请求,在服务端都会分配新的线程。因此登录检查过滤器、controller、元数据对象处理器属于一个线程。 TheadLocal是线程的局部变量: TheadLocal常用方法: 如何在元数据对象处理器中获取当前登录用户的id&…

力扣hot100 两数之和 哈希表

&#x1f468;‍&#x1f3eb; 力扣 两数之和 &#x1f60b; 思路 在一个数组中如何快速找到某一个数的互补数&#xff1a;哈希表 O(1)实现⭐ AC code class Solution {public int[] twoSum(int[] nums, int target){HashMap<Integer, Integer> map new HashMap<&g…

shell脚本学习笔记07

如何让shell实现 可选择性执行 的功能 用了while进行循环&#xff0c;是死循环&#xff0c;在循环时&#xff0c;使用case进行使用哪个脚本进行执行。使用clear进行每一次操作前的清屏&#xff0c;eof代表输入这个会显示目录。read用来读取输入的值&#xff0c;如果不输入值不会…

初始ProtoBuf

目录​​​​​​​ ⼀、初识ProtoBuf 1. 序列化概念 2. ProtoBuf是什么 3. ProtoBuf的使用特点 ⼆、安装ProtoBuf 1、ProtoBuf在window下的安装 2、ProtoBuf在Linux下的安装 ⼀、初识ProtoBuf 1. 序列化概念 序列化和反序列化 序列化&#xff1a;把对象转换为字节序列…

【开源】基于Vue.js的高校实验室管理系统的设计和实现

项目编号&#xff1a; S 015 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S015&#xff0c;文末获取源码。} 项目编号&#xff1a;S015&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实…

LeetCode【12】整数转罗马数字

题目&#xff1a; 思路&#xff1a; https://blog.csdn.net/m0_71120708/article/details/128769894 代码&#xff1a; public String intToRoman(int num) {String[] thousands new String[] {"", "M", "MM", "MMM"};String[] hun…

【C++历练之路】list的重要接口||底层逻辑的三个封装以及模拟实现

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; &#x1f354;前言&#xff1a; 在C的世界中&#xff0c;有一种数据结构&#xff0c;它不仅像一个神奇的瑰宝匣&#xff0c;还像一位能够在数据的海洋中航行的智慧舵手。这就是C中的list&#xff0c;一个引人入胜的工具…

千梦网创:外貌与内貌

一、怎样提高身价&#xff1f; 同样的商品或服务怎样卖得更贵&#xff1f; 要么通过更贵的渠道、要么通过更好的包装。 水还是那个水&#xff0c;放在星巴克可以卖很贵&#xff0c;印上不同的logo可以卖不同的价格。 拿线下的教育培训行业来说&#xff0c;真正让你去测评哪…

保险保险保险保险保险QAQ

该买保险啦&#xff01; 一、百万医疗险&#xff1a;事后报销医疗费用1、蓝医保 太平洋保险2、长相安 平安健康3、金医保 人寿保险4、好医保 人保健康 二、重疾险&#xff1a;确诊后一次性给付1、达尔文7号 国联人寿保险公司2、超级玛丽9号 君龙人寿3、守卫者6号 国联人寿保险公…