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

上一篇文章如何在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的源码把这些问题再一步一步解决,我觉得对于我来说,这个过程成长是巨大的。所以下一篇我想写的是我是怎么一步一步去解决这些问题。

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

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

相关文章

【C++】:模板的使用

目录 1、泛型编程 2、函数模板 2.1、函数模板概念 2.2、函数模板格式 2.3、函数模板的原理 2.4、函数模板的实例化 2.6、模板参数的匹配原则 3、类模板 3.1、 类模板的定义格式 3.2、 类模板的实例化 4、非类型模板参数 5、模板的特化 5.1、函数模板特化 5.2、类模…

达标进度条

1.效果 1. 2.代码与使用 1.自定义组合控件 kotlin import android.annotation.SuppressLint import android.content.Context import android.graphics.drawable.Drawable import android.util.AttributeSet import android.view.Gravity import android.view.LayoutInflat…

Triage沙箱监控

Triage沙箱可以免费分析恶意软件样本。最先进的恶意软件分析沙箱,具有您需要的所有功能。 在可定制的环境中提交大量样本,并对许多恶意软件系列进行检测和配置提取。立即查看公开报告并对您的恶意软件进行分类! 官方网址:https:…

ARM CoreLink CCN 互连总线介绍

NIC NOC CCI CMN CNN NI cmn-700 nic-700 ni-700 MLGB这都是啥玩意? 后期博文或视频将会更新这一系列。今天先温习一下CNN的概念,这是来自2014年的文章,然后稍微整理总结一番。 以下是正文… 现代主流和优质 ARM 片上系统 (SoC) 产品使用 CoreLink 缓存一致性网络 (CCN) 504…

整理低秩的理解

秩的定义是矩阵中非零特征值的个数。比如一个NxN的矩阵,它的秩为r,r远小于N,我们可以说它是低秩的。 但还有另一种情况:这个矩阵的的秩接近N,但它的特征值大多数接近于0,只有少数几个特征值特别大&#xf…

Windows10 MYSQL Installer 安装(mysql-installer-community-5.7.19.0.msi)

分类 编程技术 1.进入官网找到自己所需的安装包:https://dev.mysql.com/ ,路径:DOWNLOAD-->MYSQL Community Edition(GRL)-->MYSQL on Windows (Installer & Tool) 或直接点击 MySQL :: Download MySQL Installer 查看最新版本。…

安卓中轻量级数据存储方案分析探讨

轻量级数据存储功能通常用于保存应用的一些常用配置信息,并不适合需要存储大量数据和频繁改变数据的场景。应用的数据保存在文件中,这些文件可以持久化地存储在设备上。需要注意的是,应用访问的实例包含文件所有数据,这些数据会一…

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

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

安卓源码-工程目录

1、程序启动配置及主要的权限声明 2、 界面渲染 3、 布局用 4、 常量等 5、 gradle构建

apply和call在Javascript中的使用与区别

apply和call在js中的使用与区别: 字符串格式化: ${占位符} name小帅 console.log(我是${name}) //我是小帅apply: 语法:function.apply(thisArg, [argsArray])thisArg:可选参数,指定函数执行时的上下文&#xff08…

国际知名商学院复旦大学EMBA荣登全球第8位,中文项目国内居首

2023年10月16日,英国《金融时报》(FT)发布全球EMBA项目排名。复旦大学EMBA位列全球8强,蝉联中文项目全球第一。学术研究、生源资历、商学院顾问委员会国际化程度、整体满意度等数个重要指标位列中文项目全球第 1位。    排名不…

ClientDateSet:Cannot perform this operation on a closed dataset

一、问题表现 Delphi 三层DataSnap,使用AlphaControls控件优化界面,一窗口编辑时,出现下列错误提示: 编译通过,该窗口中,重新显示数据,下图: 相关代码: procedure…

memset和bzero性能分析

首先,我们需要了解bzero和memset的功能。bzero是一个非标准函数,用于将一块内存区域的内容设置为0。它的原型如下:void *bzero(void *s, size_t n);其中,s是要设置的内存区域的起始地址,n是要设置的字节数。memset是一…

ROS 学习应用篇(九)ROS中launch文件的实现

launch文件就好比一个封装好的命令库,我们按照在终端中输入的代码指令,全部按照launch语言格式封装在一个launch文件中,这样以后执行的时候,就可以不用开很多终端,一条一条输入代码指令。 lauch文件的语言风格很想我之…

通信原理板块——纠错编码最小码距与纠错能力的计算

微信公众号上线,搜索公众号小灰灰的FPGA,关注可获取相关源码,定期更新有关FPGA的项目以及开源项目源码,包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 对纠错编码的最小码距d0与编码的检…

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

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

PHP字符串函数的解析

在PHP中,字符串是一种常见的数据类型,用于存储和操作文本数据。PHP提供了丰富的字符串函数,用于执行各种字符串操作,包括截取、连接、替换、搜索等。在这篇文章中,我们将深入解析一些常用的PHP字符串函数,以…

C++虚函数(定义,作用,原理,案例)

一.定义: C的虚函数是在父类(基类)中声明的的函数,它可在子类(派生类)中重写。二.作用 虚函数的目的是实现多态性,即在程序运行时根据对象的实际类型确定调用哪个函数。三.使用方法: 在基类中声明虚函数时,需要在函…

【图解算法】- 快乐数还能这么解?

一 - 前言 介绍:大家好啊,我是hitzaki辰。 社区:(完全免费、欢迎加入)日常打卡、学习交流、资源共享的知识星球。 自媒体:我会在b站/抖音更新视频讲解 或 一些纯技术外的分享,账号同名&#xff…

PPT基础:合并形状

目录 合并形状功能详解合并形状使用文字转形状图表转形状 合并形状功能详解 形状:并不局限于ppt内给定的图形,也并不全是图形 (1)所在位置:选中图形后>>>形状格式>>>最左边 (2&#x…