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

news/2025/3/10 5:48:50/

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()}
}


http://www.ppmy.cn/news/1578001.html

相关文章

DeepSeek开源Day1:FlashMLA技术详解

2 月 24 日&#xff0c;DeepSeek 启动 “开源周”&#xff0c;首个开源的代码库为 FlashMLA。DeepSeek 这种挤牙膏式的宣推手段也是很有意思&#xff0c;看来梁文锋团队不仅仅是技术派&#xff0c;也擅长玩技术流量 IP。 1. FlashMLA 简介 FlashMLA 是由 depseek-ai &#xf…

swift-5-汇编分析闭包本质

一、枚举、结构体、类都定义方法 方法占用对象的内存么&#xff1f; 不占用 方法的本质就是函数 方法、函数都存放在代码段&#xff0c;因为方法都是公共的&#xff0c;不管 对象一还是对对象二调用都是一样的&#xff0c;所以放在代码段&#xff0c;但是每个对象的成员不一样所…

DeepSeek开源Day2:DeepEP技术详解

2 月 24 日&#xff0c;DeepSeek 启动 “开源周”&#xff0c;第二个开源的代码库为 DeepEP。很好&#xff0c;又挤了一段有硬件基因的牙膏出来。H100/H800 绝对是 DeepSeek 的小心肝。 1 DeepEP 简介 DeepEP 是由 deepseek-ai &#xff08;深度求索&#xff09;开发的一个开源…

Go语言中位清除运算符的应用场景

package mainimport "fmt"func main() {a : 5 //101b : 1 //001//100 -> 4fmt.Println(a, b)//位清除 当b为0的时候取a的值&#xff0c;当b为1的时候取0fmt.Println(a &^ b) }《Go语言圣经》里面有对此的描述&#xff0c;x a &^ b&#xff0c;当b为…

React基础之组件通信

组件嵌套 父子传值实现 实现步骤 1.父组件传递数据-在子组件标签上绑定属性 2.子组件接收数据-子组件通过props参数接收数据 import React, { useRef, useState } from react; //父传子 //1.父组件传递数据&#xff0c;需要在子组件标签上绑定数据 //2.子组件接收数据 props的参…

【从零开始学习计算机科学】计算机组成原理(六)异常事件处理

【从零开始学习计算机科学】计算机组成原理&#xff08;六&#xff09;异常事件处理 异常事件处理异常处理的数据通路异常事件入口地址 异常事件处理 异常和中断事件改变处理机正常指令的执行顺序。异常指令执行过程中&#xff0c;由于操作非法和指令非法引起的事件。陷阱指陷…

idea技巧

文章目录 查看最近修改的代码或者文件折叠和展开代码显示类结构图&#xff08;类的继承层次&#xff09;快速定位到代码块开始位置\结束代码快速搜索和打开类快速显示类结构&#xff0c;可以显示类中包含的所有属性和方法在方法间快速移动定位&#xff08;即光标以方法为单位移…

ARM嵌入式低功耗高安全:工业瘦客户机的智慧城市解决方案

智慧城市建设的不断推进&#xff0c;工业瘦客户机&#xff08;Industrial Thin Client&#xff09;作为一种高效、稳定的计算终端设备&#xff0c;正在成为智慧城市基础设施的重要组成部分。工业瘦客户机以其低功耗、高安全性和易管理性&#xff0c;为智慧城市的各个领域提供了…