element-ui的el-tree使用-懒加载状态下el-tree的叶子节点才显示多选框,父节点则隐藏多选框

2024-04-24 07:04

本文主要是介绍element-ui的el-tree使用-懒加载状态下el-tree的叶子节点才显示多选框,父节点则隐藏多选框,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

项目要求:
多选树得叶子节点数据

1、el-tree

树为懒加载
后端数据返回得树节点数据为:

{nodeId:‘’,nodeName: ‘’,isLeaf: '0'
}

isLeaf为判断是否叶子节点参数

<el-tree :props="defaultProps" ref="tree" highlight-current @check-change="treeNodeClick" node-key="nodeId" show-checkbox check-strictly :default-expanded-keys="defaultExpandedKeys" :load="load" lazy />

其中得参数有
check-strictly: 设置父子节点不关联
node-key=“nodeId”: key值,根据实际修改
defaultProps: label:树显示数据得对应参数-根据实际显示参数修改

defaultProps: {// children: "children",label: "nodeName",isLeaf: 'isLeaf'},

load方法
主要是把isLeaf 改为true
这样后面隐藏父节点多选框才能选中

load (tree, resolve) {let foundNode = []if(!tree.data.nodeId) {tree.data.nodeId = this.parentId || ''}tree.data.nodeId = tree.data.nodeId || ''//获取后端接口数据App.$get(this.treeUrl + `?parentId=${tree.data.nodeId}`).then(result => {if (result) {foundNode = result.map(item => {if(item.isLeaf) {//按需求修改-我这里需求需要增加保存每层的父id,if(tree.data.nodeId) {item.parentId = tree.data.nodeId}// item.hasChildren = true}//我这里nodeType == 'E'则为叶子节点,判断把isLeaf修改为trueif(item.nodeType == 'E') {item.isLeaf = true} else item.isLeaf = falsereturn item})resolve(foundNode)}})},

二、通过css将父节点得多选框隐藏

也是网上看到的方法,不过我复制了其他大佬的却直接全部隐藏了,所以修改了一点点,不知道是不是因为版本不一样,他们的写法我的没生效。
.showLeafCheck 是我包裹在el-tree的外层类,我用来判断是否需要隐藏父节点多选框的,有需求的可以加一个

.showLeafCheck ::v-deep .el-tree-node {.el-checkbox{display: none;} .is-leaf + .el-checkbox {display: inline-block;} 
}

这篇关于element-ui的el-tree使用-懒加载状态下el-tree的叶子节点才显示多选框,父节点则隐藏多选框的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/931061

相关文章

Linux使用fdisk进行磁盘的相关操作

《Linux使用fdisk进行磁盘的相关操作》fdisk命令是Linux中用于管理磁盘分区的强大文本实用程序,这篇文章主要为大家详细介绍了如何使用fdisk进行磁盘的相关操作,需要的可以了解下... 目录简介基本语法示例用法列出所有分区查看指定磁盘的区分管理指定的磁盘进入交互式模式创建一个新的分区删除一个存

C#使用HttpClient进行Post请求出现超时问题的解决及优化

《C#使用HttpClient进行Post请求出现超时问题的解决及优化》最近我的控制台程序发现有时候总是出现请求超时等问题,通常好几分钟最多只有3-4个请求,在使用apipost发现并发10个5分钟也... 目录优化结论单例HttpClient连接池耗尽和并发并发异步最终优化后优化结论我直接上优化结论吧,

SpringBoot使用Apache Tika检测敏感信息

《SpringBoot使用ApacheTika检测敏感信息》ApacheTika是一个功能强大的内容分析工具,它能够从多种文件格式中提取文本、元数据以及其他结构化信息,下面我们来看看如何使用Ap... 目录Tika 主要特性1. 多格式支持2. 自动文件类型检测3. 文本和元数据提取4. 支持 OCR(光学

JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

《JAVA系统中SpringBoot应用程序的配置文件application.yml使用详解》:本文主要介绍JAVA系统中SpringBoot应用程序的配置文件application.yml的... 目录文件路径文件内容解释1. Server 配置2. Spring 配置3. Logging 配置4. Ma

Linux使用dd命令来复制和转换数据的操作方法

《Linux使用dd命令来复制和转换数据的操作方法》Linux中的dd命令是一个功能强大的数据复制和转换实用程序,它以较低级别运行,通常用于创建可启动的USB驱动器、克隆磁盘和生成随机数据等任务,本文... 目录简介功能和能力语法常用选项示例用法基础用法创建可启动www.chinasem.cn的 USB 驱动

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.

c# checked和unchecked关键字的使用

《c#checked和unchecked关键字的使用》C#中的checked关键字用于启用整数运算的溢出检查,可以捕获并抛出System.OverflowException异常,而unchecked... 目录在 C# 中,checked 关键字用于启用整数运算的溢出检查。默认情况下,C# 的整数运算不会自

在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中,<trim>元素用于动态地添加SQL语句的一部分,例如SET或W