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

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

1、el-tree

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

{nodeId:‘’,nodeName: ‘’,isLeaf: '0',nodeType: 'O' / 'E//项目返回的叶子节点的判断 E为叶子节点
}

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
这样后面才会显示.is-leaf的类,在隐藏多选框的情况下,找到.if-leaf的元素显示

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;} 
}

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

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

相关文章

[Collection与数据结构] PriorityQueue与堆

1. 优先级队列 1.1 概念 前面介绍过队列&#xff0c;队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队列时&#xff0c;可能需要优先级高的元素先出队列&#xff0c;该中场景下&#xff0c;使用队列显然…

自动化机器学习流水线:基于Spring Boot与AI机器学习技术的融合探索

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

Python常用包介绍

数据处理 1.numpy&#xff08;数据处理和科学计算&#xff09; import numpy as np np.set_printoptions(precision2, suppressTrue) # 设置打印选项&#xff0c;保留两位小数&#xff0c;禁止科学计数法arr np.arange(1, 6) # 使用arange函数创建数组 print(arr)# 输出&…

深度学习下的视觉SLAM综述

作者&#xff1a;黄泽霞&#xff0c;邵春莉 来源&#xff1a;《机器人》 编辑&#xff1a;东岸因为一点人工一点智能 深度学习下的视觉SLAM综述到目前为止&#xff0c;深度学习与SLAM的结合已经在视觉里程计、场景识别与全局优化等各种任务中取得了显著的成果。同时&#xf…

Prompt Engineering,提示工程

什么是提示工程&#xff1f; 提示工程也叫【指令工程】。 Prompt发送给大模型的指令。比如[讲个笑话]、[用Python编个贪吃蛇游戏]、[给男/女朋友写情书]等看起来简单&#xff0c;但上手简单精通难 [Propmpt]是AGI时代的[编程语言][Propmpt]是AGI时代的[软件工程][提示工程]是…

线上申报开放时间!2024年阜阳市大数据企业培育认定申报条件、流程和材料

2024年阜阳市大数据企业培育认定申报条件、流程和材料&#xff0c;线上申报开放时间整理如下 一、2024年阜阳市大数据企业培育认定申报要求 &#xff08;一&#xff09;经营范围 申请认定的企业应当从事以下生产经营活动&#xff1a; 1.从事数据收集、存储、使用、加工、传输、…

使用linux,c++,创作一个简单的五子棋游戏

#include <iostream> #include <vector> #include <unordered_map> using namespace std; // 棋盘大小 const int BOARD_SIZE 15; // 棋子类型 enum ChessType { EMPTY, BLACK, WHITE }; // 棋盘类 class ChessBoard { private: vect…

CHiME-8多通道远场语音识别Baseline介绍

语音领域每年都有很多比赛&#xff0c;每个比赛都有自己的侧重点&#xff0c;其中CHiME系列比赛的侧重点就是多通道远场语音识别&#xff0c;与其他的语音识别比赛有所区别的是&#xff0c;CHiME提供分布式麦克风和麦克风阵列数据&#xff0c;这样可以选择合适的前端算法以降低…

创建Spring Boot项目

选择Maven Archetype,之后再Archetype选择webapp 两个都打勾 这是当前的打勾 这个是以后都默认勾上 打开对应的路径&#xff0c;用vscode打开settings.xml 加入国内源 阿里云 若没有此文件可上网查找 若jar包出现问题&#xff0c;可在repostitory文件内全删除 之后在Maven刷…

设计模式之责任链模式(二): 实现方式

C设计模式专栏&#xff1a;http://t.csdnimg.cn/8Ulj3 相关文章系列 设计模式之责任链模式(一)-CSDN博客 目录 1.引言 2.实现方式1 3.实现方式2 4.总结 1.引言 责任链设计模式(Chain of Responsibiliy DesignPattern)简称职责链模式。在GOF的《设计模式:可复用面向…

第12章 最佳的UI体验——Material Design实战

第12章 最佳的UI体验——Material Design实战 其实长久以来&#xff0c;大多数人都认为Android系统的UI并不算美观&#xff0c;至少没有iOS系统的美观。以至于很多IT公司在进行应用界面设计的时候&#xff0c;为了保证双平台的统一性&#xff0c;强制要求Android端的界面风格必…

HarmonyOS开发案例:【 自定义弹窗】

介绍 基于ArkTS的声明式开发范式实现了三种不同的弹窗&#xff0c;第一种直接使用公共组件&#xff0c;后两种使用CustomDialogController实现自定义弹窗&#xff0c;效果如图所示&#xff1a; 相关概念 [AlertDialog]&#xff1a;警告弹窗&#xff0c;可设置文本内容和响应回…

了解HTTP代理服务器:优势、分类及应用实践

在我们日常的网络使用中&#xff0c;我们经常听到HTTP代理服务器这个术语。那么&#xff0c;HTTP代理服务器到底是什么&#xff1f;它有什么优势和分类&#xff1f;又如何应用于实践中呢&#xff1f;让我们一起来了解一下。 HTTP代理服务器是一种位于客户端和服务器之间的中间…

图像处理基础知识

图像处理基础知识 图像 1、模拟图像 模拟图像&#xff0c;又称连续图像&#xff0c;是指在二维坐标系中连续变化的图像&#xff0c;即图像的像点是无限稠密的&#xff0c;同时具有灰度值&#xff08;即图像从暗到亮的变化值&#xff09;。 2、数字图像 数字图像&#xff0…

Android13锁屏或灭屏状态下,快速按两次音量下键实现打开闪光灯功能

实现思路&#xff1a; 1、发送广播 WindowManagerService循环读取下面按键消息并分发给窗口&#xff0c;在消息分发前会在PhoneWindowManager.interceptKeyBeforeQueueing方法中进行消息的过滤。因此该实现方式为在消息分发前的interceptKeyBeforeQueueing方法中监听当前按键为…

Python基础知识—运算符和if语句(二)

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》 《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 1.输入和输出函数1.1输出函数1.2输入函数 2.常见运算符2.1赋值运算符2.2比较运算符2.3逻辑运算符2.4and逻辑与2.5or逻辑或2.6not逻…

ceph介绍

一、前言 Ceph 是一个完全分布式的系统&#xff0c;它将数据分布在整个集群中的多个节点上&#xff0c;以实现高可用性和容错性&#xff0c;ceph支持对象存储、块存储、文件存储所以被称为统一存储&#xff0c;ceph的架构由以下组件组成:mon、mgr、osd、mds、cephfs、rgw&#…

深度学习Day-14:RNN实现心脏病预测

&#x1f368; 本文为&#xff1a;[&#x1f517;365天深度学习训练营] 中的学习记录博客 &#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制] 要求&#xff1a; 本地读取并加载数据&#xff1b;了解循环神经网络RNN的构建过程&#xff1b;测试集accuracy达到87%…

自己搭建的大疆无人机RTMP流媒体服务延迟太大

流程&#xff1a;无人机摄像头->图传->遥控器->流媒体服务器->取流播放&#xff0c;延迟有10秒来的&#xff0c;大家有没有什么好的方案。

C# 结合JavaScript实现手写板签名并上传到服务器

应用场景 我们最近开发了一款笔迹测试功能的程序&#xff08;测试版&#xff09;&#xff0c;用户在手写板上手写签名&#xff0c;提交后即可测试出被测试者的心理素质评价分析。类似功能的场景还比如&#xff0c;在银行柜台办理业务&#xff0c;期间可能需要您使用手写设备进…