element plus 使用 el-tree 组件设置默认选中和获取所有选中节点id

embedded/2025/1/12 17:42:31/

1. 设置默认选中:

使用 default-checked-keys 属性,设置默认要选中的节点,以数组形式,如下:

<el-treeref="treeRef":data="data"show-checkboxnode-key="id":props="defaultProps":default-checked-keys="[5]"
/>

2. 调用 Tree 实例对象的 getCheckedKeys 方法来获取选中的所有节点,如下:

const treeRef = ref();
const checkedId = ref([]);function getCheckedId() {checkedId.value = treeRef.value?.getCheckedKeys();
}

完整代码如下:

<template><div><el-treeref="treeRef":data="data"show-checkboxnode-key="id":props="defaultProps":default-checked-keys="[5]"/><el-button @click="getCheckedId">获取选中节点: {{ checkedId }}</el-button></div>
</template><script setup>
const defaultProps = {children: "children",label: "label",
};
const data = [{id: 1,label: "Level one 1",children: [{id: 2,label: "Level two 1-1",children: [{id: 3,label: "Level three 1-1-1",},{id: 4,label: "Level three 1-1-2",},],},],},{id: 5,label: "Level two 1",},
];
const treeRef = ref();
const checkedId = ref([]);function getCheckedId() {checkedId.value = treeRef.value?.getCheckedKeys();
}
</script>


http://www.ppmy.cn/embedded/153344.html

相关文章

【Python项目】基于深度学习的身份证识别考勤系统

【Python项目】基于深度学习的身份证识别考勤系统 技术简介&#xff1a;采用Python技术、MYSQL数据库等实现。 系统简介&#xff1a;首先会把总用户数、总打卡数、当前年份以及当前月份等等各种信息一一统计出来&#xff1b;新增用户就是通过训呼信息的方式输入&#xff0c;将用…

移动支付安全:五大威胁及防护策略

随着移动支付的普及和便利&#xff0c;越来越多的用户选择通过支付应用进行日常交易。根据艾利德市场研究公司&#xff08;Allied Market Research&#xff09;的报告&#xff0c;全球移动支付市场预计到2027年将超过12万亿美元。然而&#xff0c;随着市场的增长&#xff0c;移…

K8S集群更新api-sever证书的SAN属性

一、场景 1、当你的api-server需要更新API 服务器的地址和端口号就会使用到SAN属性证书。 2、查看证书的SAN属性 openssl x509 -in server.crt -text -noout | grep -A1 "Subject Alternative Name" *192.168.91.105是我更新的kube-vip进去,这样如果访问 192.168.9…

springboot + vue+elementUI图片上传流程

1.实现背景 前端上传一张图片&#xff0c;存到后端数据库&#xff0c;并将图片回显到页面上。上传组件使用现成的elementUI的el-upload。、 2.前端页面 <el-uploadclass"upload-demo"action"http://xxxx.xxx.xxx:9090/file/upload" :show-file-list&q…

Mysql连接报错排查解决记录

Mysql连接报错排查解决记录 背景&#xff1a; 系统&#xff1a;uos server-1060e​ 运行环境kvm虚拟机​ mysql版本&#xff1a;5.7.44, for Linux (x86_64)问题现象&#xff1a; 宿主机重启后&#xff0c;kvm虚拟机内的mysql服务无法远程连接了。通过不同的客户端工具连接…

Java 数据结构之-LinkedHashMap

继承关系和基本概念 LinkedHashMap是HashMap的子类&#xff0c;它继承了HashMap的基本功能。它在HashMap的基础上&#xff0c;通过维护一个双向链表来记录元素的插入顺序或者访问顺序&#xff08;可以通过构造函数指定&#xff09;&#xff0c;从而在遍历元素时能够按照特定的顺…

代理模式简介

代理模式是一种设计模式&#xff0c;它允许我们通过一个中介对象来间接访问目标对象&#xff0c;这个中介对象称为“代理”。代理模式的关键在于&#xff0c;它在不改变目标对象代码的前提下&#xff0c;通过引入代理对象来增加额外的功能或控制对目标对象的访问。 代理模式的基…

Windows C++开发环境:VSCode + cmake + ninja + msvc (cl.exe) + msys2/bash shell

这套环境的作用/优点 VSCode&#xff1a;代替Visual Studio, 启动迅速&#xff0c;内存占用小cmake: 与linux一致的构建系统ninja msvc: 用ninja作为cmake的generator, 配合msvc生成工具完成C工程的编译和链接 msvc作为编译工具&#xff0c;而不是msys2或mingw64的gcc&#x…