2022-12-05 优化el-tree懒加载选人树

news2024/11/15 15:34:59

今后就都拼抵抗力了嗷
在这里插入图片描述

需求描述

在这里插入图片描述

  • 此处有一棵懒加载树(可选人),右侧展示已选中的人。
  • 且父子关联,可以通过选中一个部门勾选所有子节点。
  • 问题是,选中父节点,当子节点未加载时,是获取不到勾选的子节点的。
    点击展开获取子节点后,它才会跳出来,展示在右边。
  • 用户在使用时,往往以为选中父节点就选中了子节点,十分不友好。

解决方法

1.父子联动(孙节点不再跟)
禁用官方的父子联动(手动设置继承选中状态(仅继承一层))
在这里插入图片描述

2.选中节点加载并手动展开一层
3.已加载的节点和未加载的节点分开处理。如果已加载节点,则展开并立即获取选中值
4.只能选中人,且继承父子联动时,只考虑type === 'U’的节点

    // check事件方法
    getData(data) {
      const node = this.$refs.tree.getNode(data.id) // 获取节点
      if (this.multiple) {
      	// 多选
        if (!(node.isLeaf ||(node.childNodes && node.childNodes.length))) {
	        // 未加载----------------------------------------------------------------
	        node.loaded = false // 告知当前节点还未加载
	        node.expand()  // 展开并加载当前节点(el内置方法)
        } else {
            // 已加载----------------------------------------------------------------
            node.childNodes.forEach(item => { // 遍历子节点,手动设置继承checked状态
              if(item.data.type === 'U') {
                item.checked = node.checked
              }
            })
            node.expanded = true  // 展开当前节点
            this.getChecked() // 获取选中值 ,放入右侧
        }
      } else {
        // 单选
        ...
        this.getChecked() // 获取选中值 ,放入右侧
      }
    },
// 人员懒加载回调方法
    getOrgList(node, resolve) {
      setTimeout(() => {
        if (node.level === 0) {
        } else {
         // 懒加载子节点
          getUserTree(this.params).then(res => {
            node.data.children = res.data
            resolve(node.data.children)
            
            // 加载子节点时继承父节点
            res.data.forEach(item => {
              if(item.type === 'U') {
                this.$refs.tree.setChecked(item.id, node.checked)
              }
            })
            
            // 若为多选模式(严谨),在加载节点后就立即获取选中值 ,放入右侧(因为没回调)
            if (this.multiple) {
              this.getChecked()
            }
            
          })
        }
      })
    },

另外补充两个关于节点的配置

    // node.expanded = true // 展开节点
    // node.loaded = true // 加载节点

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

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

相关文章

Redis配置、持久化以及相命令

Redis 什么是Redis Redis(远程字典服务器)是一个开源的、使用C语言编写的NoSQL数据库 Redis 基于内存运行并支持持久化,采用key-value(键值对)的存储形式,是目前分布式架构中不可或缺的一环。 Redis服务…

新来的性能测试工程师工资25K,看了他做的性能测试,那才真叫牛

一直深耕于互联网行业的测试工作,前期测试主要以项目为主,也就是 一个人负责2-3个项目 的测试工作,当然包括项目上功能、自动化和性能等一切测试工作。 我有几个朋友也在互联网大厂工作,从他们当中了解到其实真正的互联网大厂&…

【前端CSS】网站都变成灰色了,它是怎么实现的?(含源代码解析)

目录:网站都变成灰色了,它是怎么实现的?一、前言二、如何实现的三、代码的理解3.1 CSS3 filter(滤镜) 属性3.2 定义和使用3.2.1 CSS动画演示3.2.2 JS语法演示3.3 浏览器支持3.4 CSS 语法3.5 Filter 函数四、实例展示4.1 模糊实例4.2 Brightne…

3、JSP——Servlet、IDEA创建Web项目、IDEA创建JSP页面

目录 一、Servlet的概念 二、Servlet的作用 三、IDEA中创建Web项目 四、手动部署 五、自动部署 1、IDEA部署Tomcat服务器 2、IDEA部署JavaWeb项目 3、JSP页面 一、Servlet的概念 (1)Servlet:Server Applet的简称,是运…

云服务器配置Code-Server环境并运行Python和C++

目录1、前言2、部署流程2.1 前置准备2.2 运行docker安装Code-Server3、运行Code-Server3.1 配置运行环境3.2 运行Python3.3 运行C1、前言 云服务器需要配置C开发环境,了解到有code-server这个VsCode提供的云端服务,因此选择在云服务器上部署。 2、部署流…

D3--FPGA IIC接口通信2022-12-05

1.IIC简介 1.1 IIC概述 IIC即 Inter-Integrated Circuit(集成电路总线),是由 Philips 半导体公司在八十年代初设计出来的一种简单、双向、二线制总线标准。多用于主机和从机在数据量不大且传输距离短的场合下的主从通信。主机启动总线,并产…

[附源码]计算机毕业设计少儿节目智能推荐系统Springboot程序

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

Android 基础知识4-2.2常用控件提示(Toast)

效果图: 介绍: Toast是Android提供的“快显讯息”类,Toast类的使用非常简单,而且用途很多。比如,当退出应用程序时,可以用它来提示用户“需要更新”,或者当在输入框中输入文本时,可以…

含有双硫键的交联剂NHS-PEG1-SS-PEG1-NHS,NHS-SS-NHS,活性酯-双硫键-活性酯

基础产品数据(Basic Product Data): 中文名:活性酯-双硫键-活性酯 英文名:NHS-SS-NHS,NHS-PEG1-SS-PEG1-NHS 结构式(Structural): 详细产品数据(Detailed Pro…

批量查询谷歌PR权重的方法有哪些?是什么影响着谷歌PR值?

批量查询谷歌PR权重的方法有哪些? 查询谷歌PR权重最简单最最直接的方法就是使用站长工具查询,具体操作如下: 首先打开站长工具,在域名输入框输入网站的域名(一行一个); 然后勾选需要查询的功能&…

NumPy模块使用介绍

NumPy使用介绍1.NumPy科学计算库介绍和环境准备 ​ NumPy(Numerical Python)是Python的⼀种开源的数值计算扩展。提供多维数组对象,各种派⽣对象(如掩码数组和矩阵),这种⼯具可⽤来存储和处理⼤型矩阵&…

Qt下多线程的四种使用方法总结及代码示例

文章目录前言一、继承QThread,重写run()函数二、继承QObject,使用moveToThread()函数三、继承QRunnable,重写run()函数,使用QThreadPool线程池四、使用QtConcurrent的run()函数五、示例代码六、下载链接总结前言 在之前的Qt开发工…

时间序列分析的基本流程(R语言版——实验篇)

数据处理 1.导入数据&#xff08;.csv&#xff09; 能导入绝大所数形式的格式文件 ex52<-read.table("C:\\Users\\33035\\Desktop\\习题5.2数据.txt",headerT,fileEncoding GBK) #header &#xff1a;T:表示留第一行 #fileEncoding:有中文时最好改为GBK 2.对数…

MySQL---DDL

MySQL简介DDL操作 文章目录MySQL简介DDL操作数据库分类关系型数据库&#xff08;SQL&#xff09;非关系型数据库&#xff08;NOSQL&#xff09;区别DBMSMySQL简介概念特点MySQL运行机制SQL通用语法结构化查询语言分类DDL操作数据库操作表查询创建数据类型数值类型字符串类型日期…

入行测试已经4年了 ,进阿里后迷茫了3个月,做完这个项目我决定离职....

转行测试 我是大专非计科&#xff0c;我转行之前从事的工作是商场管理&#xff0c;努力了4年左右的时间才做到楼层经理&#xff0c;但是工资太低并且事情太多&#xff0c;薪资才6K。 更多的是坚定了自己的想法&#xff0c;我要改变自己 恰好有几个大学同学在互联网公司工作&a…

微电网重构|基于群稀疏性的机会约束微电网重构(Matlab代码和Python代码实现)

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清…

python算法对音频信号处理Sonification :Gauss-Seidel迭代算法

可以将44.1kHz单通道.wav文件中的一秒读取到长度为44100的数组&#xff08;称为b&#xff09;中。给定矩阵A&#xff0c;我们寻求系统Ax b的解。通过Gauss-Seidel的迭代&#xff0c;向量如果我们将b记录的录音&#xff0c;则将一些白噪声作为我们的初始猜测&#xff0c;并在每…

JVM常见面试题

目录 一、JVM内存划分 二、JVM类加载 1、什么是类加载 2、类加载的过程 2.1 加载 2.2 连接 2.3 初始化 3、何时触发类加载 4、双亲委派模型 4.1 什么是双亲委派模型 4.2 双亲委派模型的优点 三、JVM的垃圾回收机制 1、什么是GC 2、GC回收哪部分内存 3、判定垃圾…

# Monaco Editor 使用

Monaco Editor 使用 文章目录Monaco Editor 使用安装依赖版本问题vue2Vue3webpack-dev-servermonaco-editor-webpack-pluginVersion Matrix集成步骤Vue2 配置 monaco-editor-webpack-plugin 插件Vue3 vue.config.js测试页面实例属性说明支持的语言类型报错解决控制台报错效果图…

自适应滤波器更新算法-EP2

文章目录1、变步长 SC-MPNLMS 频域分块算法1.1 算法原理1.2 算法代码1.3 算法优缺点2、集成多种自适应滤波算法的回声消除器1.1 算法原理1.2 算法代码1.3算法优缺点1.4 算法自适应准则3、新的变步长的LMS自适应滤波算法3.1算法原理3.2算法代码3.3算法优缺点参考文献本文接上一篇…