当前位置: 首页 > news >正文

Element Plus中的树组件的具体用法(持续更新!)

const defaultProps = {//子树为节点对象的childrenchildren: 'children',//节点标签为节点对象的name属性label: 'name',
}

属性

以下是树组件中的常用属性以及作用:

data:展示的数据(数据源)

show-checkbox:节点是否可被选择(点击可以选中)

node-key:每个树节点用来作为唯一标识的属性,整棵树应该是唯一的(如果树中包含children子数据,该属性不能省略)

default-expand-all:默认展开所有节点

default-checked-keys:默认勾选的节点的 key 的数组(是一个数组,数组中存放的就是上面node-key存放的唯一标识)

default-expanded-keys:默认展开的节点的 key 的数组(是一个数组,数组中存放的就是上面node-key存放的唯一标识)

current-node-key:当前选中的节点(可以是number或string类型)

props:接收一个对象,对象中可以包含以下两个属性(还可以包含其他属性,这里只列举了以下两个)

label:指定节点标签为节点对象的某个属性值(就是代表了要在页面中展示的节点名称) ,children:指定子树为节点对象的某个属性值(就是代表去哪个字段下读取数据当作子节点的数据)(注意:label和children这两个属性名是不变的,属性值需要根据项目需要进行修改)

方法

常用方法:

使用el-tree树组件提供的方法时,需要先在el-tree组件标签上利用ref打上标识(<el-tree ref="xxx"> </el-tree>),然后通过ref得到el-tree组件实例才能调用对应方法!

1. getCheckedKeys:如果在el-tree标签上设置了show-checkbox属性且被选中,通过树组件实例.getCheckedKeys进行调用,它将返回当前选中节点key的数组(该数组由所有被选中的节点的id属性组成【为什么是id属性呢?        因为:在el-tree标签上设置了node-key="id"属性。所以该方法会收集所有选中的节点对象的id属性】)

 2. getHalfCheckedNodes:如果在el-tree标签上设置了show-checkbox属性且被选中,通过树组件实例.getHalfCheckedNodes进行调用,它将返回当前半选中的节点组成的数组
如遇这种情况该方法一般会和上面的getCheckedKeys配合使用

下方代码意思是:将利用getCheckedKeys得到的id数组和利用getHalfCheckedKeys得到的半选id数组合并然后作为向服务器发送请求的参数

//抽屉确定按钮的回调
const handler = async () => {//职位(角色)的IDconst roleId = RoleParams.id as number//选中节点的ID		getCheckedKeys方法会得到show-checkbox为true选中的全部节点对象的id组成的数组//为什么是能收集到id 		因为el-tree配置了node-key="id"属性let arr = tree.value.getCheckedKeys()//半选的IDlet arr1 = tree.value.getHalfCheckedKeys()let permissionId = arr.concat(arr1)//下发权限let result: any = await reqSetPermisstion(roleId, permissionId)if (result.code == 200) {//抽屉关闭drawer.value = false//提示信息ElMessage({ type: 'success', message: '分配权限成功' })//页面刷新window.location.reload()}
}

相关文章:

Element Plus中的树组件的具体用法(持续更新!)

const defaultProps {//子树为节点对象的childrenchildren: children,//节点标签为节点对象的name属性label: name, } 属性 以下是树组件中的常用属性以及作用&#xff1a; data&#xff1a;展示的数据&#xff08;数据源&#xff09; show-checkbox&#xff1a;节点是否可…...

nodejs使用WebSocket实现聊天效果

在nodejs中使用WebSocket实现聊天效果&#xff08;简易实现&#xff09; 安装 npm i ws 实现 创建 server.js /*** 创建一个 WebSocket 服务器&#xff0c;监听指定端口&#xff0c;并处理客户端连接和消息。** param {Object} WebSocket - 引入的 WebSocket 模块&#xff0c…...

通领科技冲刺北交所

高质量增长奔赴产业新征程 日前&#xff0c;通领科技已正式启动在北交所的 IPO 进程&#xff0c;期望借助资本市场的力量&#xff0c;加速技术升级&#xff0c;推动全球化战略布局。这一举措不仅展现了中国汽车零部件企业的强大实力&#xff0c;也预示着行业转型升级的新突破。…...

利用LLMs准确预测旋转机械(如轴承)的剩余使用寿命(RUL)

研究背景 研究问题:如何准确预测旋转机械(如轴承)的剩余使用寿命(RUL),这对于设备可靠性和减少工业系统中的意外故障至关重要。研究难点:该问题的研究难点包括:训练和测试阶段数据分布不一致、长期RUL预测的泛化能力有限。相关工作:现有工作主要包括基于模型的方法、数…...

comctl32!ListView_OnSetItem函数分析LISTSUBITEM结构中的image表示图标位置

第一部分&#xff1a; BOOL ListView_SetSubItem(LV* plv, const LV_ITEM* plvi) { LISTSUBITEM lsi; BOOL fChanged FALSE; int i; int idpa; HDPA hdpa; if (plvi->mask & ~(LVIF_DI_SETITEM | LVIF_TEXT | LVIF_IMAGE | LVIF_STATE)) { …...

Django工程获取请求参数的几种方式

在 Django 中获取请求参数的完整方法如下&#xff1a; 一、GET 请求参数获取 def view_func(request):# 获取单个参数&#xff08;推荐方式&#xff09;name request.GET.get(name, default) # 带默认值age request.GET.get(age, 0)# 获取多个同名参数&#xff08;如复选框…...

使用Qt调用HslCommunication(C++调用C#库)

使用C/CLI 来调用C#的dll 任务分解&#xff1a; 1、实现C#封装一个调用hsl的dll&#xff1b; 2、实现C控制台调用C#的dll库&#xff1b; 3、把调用C#的dll用C再封装为一个dll&#xff1b; 4、最后再用Qt调用c的dll&#xff1b; 填坑&#xff1a; 1、开发时VS需要安装CLI项目库…...

C++中的构造函数

目录 一、什么是构造函数&#xff1a; 二、构造函数的特性和使用&#xff1a; 1、构造函数的特性&#xff1a; 2、构造函数的重载&#xff1a; 三、默认生成的构造函数&#xff1a; 一、什么是构造函数&#xff1a; 在C中&#xff0c;当创建一个对象之后&#xff0c;就会自…...

MySQL知识点(第一部分)

MySQL 基础&#xff1a; 1、SQL语句的分类&#xff1a; DDL&#xff1a;用于控制数据库的操作DML&#xff1a;用于控制表结构的字段&#xff0c;增、删、修DQL&#xff1a;用于查询语句DCL&#xff1a;用于管理数据库&#xff0c;用户&#xff0c;数据库的访问 权限。 2、M…...

Lua怎么学?Lua编程实战:从基础语法到高级特性

朋友们&#xff0c;大家好&#xff0c;我是袁庭新。我的《Lua编程实战&#xff1a;从基础语法到高级特性》教程上线了&#xff01;这是一套从零掌握Lua编程&#xff0c;涵盖基础到高级&#xff0c;以实战驱动&#xff0c;快速上手Lua开发的精品教程&#xff01; 我为什么要研发…...

Qt常用控件之 纵向列表QListWidget

纵向列表QListWidget QListWidget 是一个纵向列表控件。 QListWidget属性 属性说明currentRow当前被选中的是第几行。count一共有多少行。sortingEnabled是否允许排序。isWrapping是否允许换行。itemAlignment元素的对齐方式。selectRectVisible被选中的元素矩形是否可见。s…...

Manus无需邀请码即可使用的平替方案-OpenManus实测

文章目录 Manus 简介核心定位技术架构核心特点应用场景性能表现用户体验发展计划OpenManus技术架构与设计理念核心功能特性应用场景案例与闭源Manus的差异对比安装使用与实战演示执行过程记录简单案例-快速写一个helloworld的java程序复杂案例-分析特斯拉汽车近三年财务数据并生…...

git如何解除远程仓库 改变远程仓库地址

这三个命令通常一起使用来更改项目的远程仓库地址&#xff1a; 查看当前远程仓库配置&#xff1a;git remote -v移除旧的远程仓库配置&#xff1a;git remote remove origin添加新的远程仓库配置&#xff1a;git remote add origin 新的远程仓库地址 要解除当前项目的远程仓库…...

VSCode 配置优化指南:打造高效的 uni-app、Vue2/3、JS/TS 开发环境

VSCode 配置优化指南,适用于 uni-app、Vue2、Vue3、JavaScript、TypeScript 开发,包括插件推荐、设置优化、代码片段、调试配置等,确保你的开发体验更加流畅高效。 1. 安装 VSCode 如果你还未安装 VSCode,可前往 VSCode 官网 下载最新版并安装。 2. 安装推荐插件 (1) Vue…...

云计算:虚拟化、容器化与云存储技术详解

在上一篇中,我们深入探讨了网络安全的核心技术,包括加密、认证和防火墙,并通过实际案例和细节帮助读者全面理解这些技术的应用和重要性。今天,我们将转向一个近年来迅速发展的领域——云计算。云计算通过提供按需访问的计算资源,彻底改变了IT基础设施的构建和管理方式。本…...

oracle 数据导出方案

工作中有遇到需要将oracle 数据库表全部导出&#xff0c;还需要去除表数据中的换行符。 方案 shell 设计 封装函数 1 function con_oracle() 用于连接oracle 2 function send_file() 用于发送文件 3 主程序 使用循环将所有表导出并发送到数据服务器 主程序 程序代码 #!…...

电商项目-秒杀系统(四)秒杀异步下单防止重复秒杀

一、 防止恶意刷单解决 在生产场景下&#xff0c;可能会有一些人会恶意访问当前网站&#xff0c;来进行恶意的刷单。这样会造成当前系统出现一些业务上的业务混乱&#xff0c;出现脏数据&#xff0c;或者造成后端访问压力大等问题。 一般要解决这个问题的话&#xff0c;前端可…...

Express 中 get 参数获取

1. 使用 req.query 获取 URL 查询字符串参数 在 GET 请求中&#xff0c;参数通常以查询字符串的形式附加在 URL 后面&#xff0c;格式为 ?参数名1值1&参数名2值2 。Express 里可通过 req.query 对象获取这些参数。 const express require("express"); const …...

《Python实战进阶》No17: 数据库连接与 ORM(SQLAlchemy 实战)

No17: 数据库连接与 ORM&#xff08;SQLAlchemy 实战&#xff09; 摘要 本文深入探讨SQLAlchemy在复杂场景下的高级应用&#xff0c;涵盖四大核心主题&#xff1a; 会话生命周期管理&#xff1a;通过事件钩子实现事务监控与审计追踪混合继承映射&#xff1a;结合单表/连接表继…...

运行OpenManus项目(使用Conda)

部署本项目需要具备一定的基础&#xff1a;Linux基础、需要安装好Anaconda/Miniforge&#xff08;Python可以不装好&#xff0c;直接新建虚拟环境的时候装好即可&#xff09;&#xff0c;如果不装Anaconda或者Miniforge&#xff0c;只装过Python&#xff0c;需要确保Python是3.…...

Linux一键美化命令行,一键安装zsh终端插件

zsh应该是很多人第一个用的Linux终端美化软件 但是其安装略微复杂&#xff0c;让人有些困扰 所以我花了两天写了一键安装脚本&#xff0c;实测运行后直接安装好 适用于Ubuntu、Debian、Red Hat、macOS等系统 直接安装好zsh 以及常用插件 autojump 跳转插件 zsh-syntax-highlig…...

OpenManus介绍及本地部署体验

1.OpenManus介绍 OpenManus&#xff0c;由 MetaGPT 团队精心打造的开源项目&#xff0c;于2025年3月发布。它致力于模仿并改进 Manus 这一封闭式商业 AI Agent 的核心功能&#xff0c;为用户提供无需邀请码、可本地化部署的智能体解决方案。换句话说&#xff0c;OpenManus 就像…...

2025-03-09 学习记录--C/C++-PTA 习题10-7 十进制转换二进制

合抱之木&#xff0c;生于毫末&#xff1b;九层之台&#xff0c;起于累土&#xff1b;千里之行&#xff0c;始于足下。&#x1f4aa;&#x1f3fb; 一、题目描述 ⭐️ 裁判测试程序样例&#xff1a; #include <stdio.h>void dectobin( int n );int main() {int n;scanf(…...

计算机网络----主要内容简介

这里写目录标题 章节概览每章的大体结构结构功能与服务的关系 一些概念概念一概念二传统的网络层的工作方式&#xff08;路由IP&#xff09;现代的网络层的工作方式&#xff08;SDN&#xff09; 章节概览 其中&#xff0c;网络层分为了两章 下面的红色部分是部分选修 每章的大…...

基于python大数据的招聘数据可视化与推荐系统

博主介绍&#xff1a;资深开发工程师&#xff0c;从事互联网行业多年&#xff0c;熟悉各种主流语言&#xff0c;精通java、python、php、爬虫、web开发&#xff0c;已经做了多年的设计程序开发&#xff0c;开发过上千套设计程序&#xff0c;没有什么华丽的语言&#xff0c;只有…...

VBA高级应用30例Excel中ListObject对象:提取表内单元格的格式元素

《VBA高级应用30例》&#xff08;版权10178985&#xff09;&#xff0c;是我推出的第十套教程&#xff0c;教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开&#xff0c;这套教程案例与理论结合&#xff0c;紧贴“实战”&#xff0c;并做“战术总结”&#xff0c;以…...

数据结构基础之《(19)—矩阵处理》

一、zigzag打印矩阵 Z字形打印矩阵 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 打印顺序&#xff1a;1,2,7,13,8,3,4,9,14... 核心技巧&#xff1a;找到coding上的宏观调度 左上角有A、B两个点&#xff0c;A往右一步一步走&#xff0c;B往下一步一步走 写一个…...

用Python写一个算24点的小程序

一、运行界面 二、显示答案——递归介绍 工作流程&#xff1a; 1. 基本情况&#xff1a;函数首先检查输入的数字列表 nums 的长度。如果列表中只剩下一个数字&#xff0c;它会判断这个数字是否接近 24&#xff08;使用 abs(nums[0] - 24) < 1e-10 来处理浮点数精度问题&…...

基于深度学习的网络摄像头图像实时分类实践:从理论到完整实现

引言&#xff1a;智能视觉感知的新可能 在人工智能技术蓬勃发展的今天&#xff0c;实时图像分类作为计算机视觉的基础任务之一&#xff0c;正在深刻改变着我们的生活。从智能手机的人脸解锁到无人超市的自动结算系统&#xff0c;从工业质检的缺陷检测到医疗影像的辅助诊断&…...

C++ 算法竞赛STL以及常见模板

目录 STL /*═══════════════ Vector ═══════════════*/ /*════════════════ Pair ════════════════*/ /*══════════════ String ════════════════*/ /*══════════…...

【资料分享】wireshark解析脚本omci.lua文件20250306版本发布(独家分享)

引言 omci.lua文件是Wireshark的OMCI协议解析插件的核心组件。它配合BinDecHex.lua&#xff0c;可以解析OMCI协议的数据包&#xff0c;提取出消息类型、受管实体标识、受管实体属性等关键信息&#xff0c;并以人类可读的形式显示在Wireshark的解码视图中&#xff0c;方便研发人…...

(dfs 单词搜索)leetcode 79

核心思路 用双重循环以所有的位置都作为起始点开始遍历 设置边界条件 上下左右都搜一次&#xff0c;不合适就回来&#xff0c;二叉树思想 经过的结点设置"#避免重复搜索导致数据混乱 递归完后要还原原字符 #include<iostream> #include<vector> #include&l…...

Java常用集合与映射的线程安全问题深度解析

Java常用集合与映射的线程安全问题深度解析 一、线程安全基础认知 在并发编程环境下&#xff0c;当多个线程同时操作同一集合对象时&#xff0c;若未采取同步措施&#xff0c;可能导致以下典型问题&#xff1a; 数据竞争&#xff1a;多个线程同时修改数据导致结果不可预测状…...

【实战ES】实战 Elasticsearch:快速上手与深度实践-5.1.1热点分片识别与均衡策略

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 5.1.1 Filebeat Logstash ES Kibana 全链路配置实1. 架构设计与组件选型1.1 技术栈对比分析1.2 硬件配置推荐 2. Filebeat 高级配置2.1 多输入源配置2.2 性能优化参数 3.…...

服务端和客户端通信(TCP)

服务端 using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading.Tasks;namespace TeachTcpServer {class Program{static void Main(string[] args){#region 知识点一 …...

练习题:76

目录 Python题目 题目 题目分析 需求理解 关键知识点 实现思路分析 复杂度分析 可能遇到的问题及注意事项 代码实现 代码解释 1. 类的定义与属性初始化 2. 定义属性的访问器&#xff08;getter&#xff09;方法 3. 定义属性的修改器&#xff08;setter&#xff09…...

SpringBoot3项目-创建及使用

简单的介绍后端SpringBoot3项目&#xff0c;从0到1搭建一个完整项目&#xff0c;给老项目源码升级备用的知识点 一、创建项目 1、打开IDEA&#xff0c;通过New Project创建项目&#xff0c;如下图&#xff1a; 2、选择Spring Initializr&#xff0c;配置好项目信息&#xf…...

前端 | 向后端传数据,判断问题所在的调试过程

目录 ​编辑 1. 在 vue 文件中&#xff0c;在调用函数之前 先打印传入的数据 2. 在 js 文件中&#xff0c;打印接收到的数据 3. 在浏览器 Network 面板查看请求数据 4. 在 server.js 中查看请求数据 5. 确保 JSON 格式正确 知识点&#xff1a;JSON.stringify(req.body, …...

Python爬虫入门实战:爬取博客文章数据并保存

Python爬虫入门实战&#xff1a;爬取博客文章数据并保存 概述 本文将介绍如何使用Python的requests和BeautifulSoup库实现一个简单的网页爬虫&#xff0c;通过实际案例演示如何爬取博客文章数据并存储到本地文件。本文适合Python爬虫初学者&#xff0c;通过案例快速掌握基本爬…...

用python 的 sentiment intensity analyzer的情感分析器,将用户评论进行分类

SentimentIntensityAnalyzer 是 nltk&#xff08;Natural Language Toolkit&#xff09;库中的一个工具&#xff0c;用于进行情感分析。它会为文本返回四个得分&#xff1a;负向情感得分&#xff08;neg&#xff09;、中性情感得分&#xff08;neu&#xff09;、正向情感得分&a…...

Android Framework 常见面试题

以下是常见的 Android Framework 面试题&#xff0c;涵盖基础到高级知识点&#xff0c;帮助准备面试&#xff1a; 一、基础问题 Android 系统架构分层 描述 Android 系统的四层架构&#xff08;Linux Kernel、Native、Framework、Application&#xff09;及各层职责。 Zygote …...

如何面向DeepSeek编程,打造游戏开发工具集,提升工作效率

最近我在思考&#xff1a; 如何基于DeepSeek&#xff0c;来提升工作效率&#xff0c;构建高效游戏开发工作流。 方向有两个: A: 基于DeepSeek私有代码框架&#xff0c;让它完成项目代码的续写; B: 基于DeepSeek来创作一些工具&#xff0c;使用工具来提升效率&#xff0c;如…...

IDE集成开发环境MyEclipse中安装SVN

打开Myeclipse的help菜单----install from site 点击add弹出对话框 在输入框中输入对应内容 http://subclipse.tigris.org/update_1.10.x 点击OK之后&#xff0c;会刷新出两个选项&#xff0c;需要选中的 点击next&#xff0c;出现许可的时候选中同意&#xff0c;一直结束等…...

QT中使用C++调用 python脚本

1、使用QT Creator 新建项目 2、添加Python解释器 在.pro 文件中添加python头文件与链接库 INCLUDEPATH -I /usr/include/python3.8/ LIBS -L /usr/lib/python3.8/config-3.8-x86_64-linux-gnu -lpython3.8本文实验为ubuntu自带python3.8&#xff0c;虚拟环境中的python解释…...

C语言学习day25:WinAPI编程进阶07-游戏辅助时钟周期事件、定时器消息

接下来我们说一下时间周期&#xff08;定时器&#xff09;事件 我们接下来继续用上一章中的代码来举例 这次课程我们需要用的函数SetTimer&#xff08;&#xff09;函数和KillTimer&#xff08;&#xff09;函数 SetTimer() 语法&#xff1a; UINT_PTR SetTimer([in, opti…...

NVIDIA Jetson Nano的国产替代,基于算能BM1684X+FPGA+AI算力盒子,支持deepseek边缘部署

NVIDIA Jetson Nano的国产替代&#xff0c;基于算能BM1684X的AI算力盒子&#xff0c;支持deepseek边缘部署 另外&#xff0c;还提供BM1684XFPGAAI的解决方案。 核心板基于Sophon SG2300X SoC&#xff08;也叫BM1684X&#xff09;打造 带有8核ARM Cortex-A53 2.3GHz&#xff0c…...

解锁STM32外设:开启嵌入式开发新世界

✨✨✨这里是小韩学长yyds的BLOG(喜欢作者的点个关注吧) ✨✨✨想要了解更多内容可以访问我的主页 小韩学长yyds-CSDN博客 目录 探索 STM32 强大的外设家族 初窥门径&#xff1a;STM32 外设开发基础 开发方式与工具 外设配置基础步骤 深入剖析&#xff1a;常见外设应用实例…...

C++的内存管理

1. C/C内存分布 我们先来看下面的一段代码和相关问题 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int…...

P8685 [蓝桥杯 2019 省 A] 外卖店优先级--优先队列“数组”!!!!!

P8685 [蓝桥杯 2019 省 A] 外卖店优先级 题目 解析优先队列如何判断是否使用优先队列&#xff1f;省略规则优先队列常用操作大顶堆 vs 小顶堆定义队列h队列数组 代码 题目 解析 每个外卖店会在不同的时间点收到订单&#xff0c;我们可以看见测试用例的时间顺序是不同的&#x…...

nuxt2 打包优化使用“compression-webpack-plugin”插件

在使用 Nuxt.js 构建项目时&#xff0c;为了提高性能&#xff0c;通常会考虑对静态资源进行压缩。compression-webpack-plugin 是一个常用的 Webpack 插件&#xff0c;用于在生产环境中对文件进行 Gzip 压缩。这对于减少网络传输时间和提高页面加载速度非常有帮助。下面是如何在…...