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

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.mzph.cn/news/892447.shtml

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

相关文章

孤独症小孩读正常学校,这些需要了解

在当今社会&#xff0c;随着对孤独症&#xff08;自闭症&#xff09;认知的不断提升&#xff0c;越来越多的家庭开始寻求让孤独症孩子融入主流教育体系的机会。星贝育园康复中心&#xff0c;作为全国规模较大的广泛性发育障碍全托寄宿制儿童康复训练机构&#xff0c;不仅以其专…

头部(Header)

在Ionic框架中&#xff0c;头部&#xff08;Header&#xff09;和底部&#xff08;Footer&#xff09;是重要的UI组件&#xff0c;它们分别固定在屏幕的顶部和底部。 头部&#xff08;Header&#xff09; 头部组件通常用于显示应用程序的标题、副标题和导航按钮。它是应用程序…

Qiskit快速编程探索(进阶篇)

五、量子电路模拟:探索量子世界的虚拟实验室 5.1 Aer模拟器:强大的模拟引擎 在量子计算的探索旅程中,Aer模拟器作为Qiskit的核心组件之一,宛如一座功能强大的虚拟实验室,为开发者提供了在经典计算机上模拟量子电路运行的卓越能力。它打破了硬件条件的限制,使得研究者无…

rust学习——环境搭建

rust安装&#xff1a;https://kaisery.github.io/trpl-zh-cn/ch01-01-installation.html 1、vscode装插件&#xff1a; toml语法支持 依赖管理 rust语法支持 2、创建demo 3、查看目录 4、执行文件的几种方式&#xff1a; rust安装&#xff1a;https://www.rust-lang.org/z…

继承(7)

大家好&#xff0c;今天我们继续来学习一下继承的知识&#xff0c;这方面需要大家勤动脑才能理解&#xff0c;那么我们来看。 1.9 protected关键字 在类和对象章节中&#xff0c;为了实现封装特性,java中引入访向限定符,主要限定:类或者类中成员能否在类外和其他包中被访问. …

玩转大语言模型——langchain调用ollama视觉多模态语言模型

系列文章目录 玩转大语言模型——ollama导入huggingface下载的模型 langchain调用ollama视觉多模态语言模型 系列文章目录前言使用Ollama下载模型查找模型下载模型 测试模型ollama测试langchain测试加载图片加载模型 模型回复 前言 视觉多模态语言模型由预训练的多模态编码器…

J-LangChain - 复杂智能链流式执行

系列文章索引 J-LangChain 入门 介绍 j-langchain是一个Java版的LangChain开发框架&#xff0c;具有灵活编排和流式执行能力&#xff0c;旨在简化和加速各类大模型应用在Java平台的落地开发。它提供了一组实用的工具和类&#xff0c;使得开发人员能够更轻松地构建类似于LangC…

【翻译】2025年华数杯国际赛数学建模题目+翻译pdf自取

保存至本地网盘 链接&#xff1a;https://pan.quark.cn/s/f82a1fa7ed87 提取码&#xff1a;6UUw 2025年“华数杯”国际大学生数学建模竞赛比赛时间于2025年1月11日&#xff08;周六&#xff09;06:00开始&#xff0c;至1月15日&#xff08;周三&#xff09;09:00结束&#xff…

C# GID+绘制不透明和半透明的线条

绘制线条时&#xff0c;必须将 Pen 对象传递给 DrawLine 类的 Graphics 方法。 Pen 构造函数的参数之一是 Color 对象。 若要绘制不透明的线条&#xff0c;请将颜色的 alpha 分量设置为 255。 若要绘制半透明的线条&#xff0c;请将 alpha 分量设置为从 1 到 254 的任何值。 在…

通过可穿戴外骨骼,以更灵活的方式操作你的机器人。

今天&#xff0c;我们将介绍一款专为控制 Mercury X1 和 Mercury B1 机械臂而设计的创新外骨骼。这种外骨骼以人类手臂的结构为蓝本&#xff0c;可实现直观和精确的控制。 开发这种外骨骼的动机源于人们对深度学习和机器学习等领域日益增长的兴趣。这些技术使机器人能够自主学习…

GaussDB分布式数据倾斜处理

常规数据倾斜巡检 在库中表个数少于1W的场景&#xff0c;直接使用倾斜视图查询当前库内所有表的数据倾斜情况 SELECT * FROM pgxc_get_table_skewness ORDER BY totalsize DESC;在库中表个数非常多&#xff08;至少大于1W&#xff09;的场景&#xff0c;因PGXC_GET_TABLE_SKEWN…

浅尝Appium自动化框架

浅尝Appium自动化框架 Appium自动化框架介绍Appium原理Appium使用安装平台驱动实战 坑 Appium自动化框架介绍 Appium 是一个开源的自动化测试框架&#xff0c;最初设计用于移动应用的测试&#xff0c;但现在它也扩展了对桌面端应用的支持。Appium 使得自动化测试变得更加简单&…

day38 tcp 并发 ,linux下的IO模型----IO多路复用

TCP 并发 由于tcp协议只能实现一对一的通信模式。为了实现一对多&#xff0c;有以下的的处理方式 1. 多进程 开销大 效率低 2. 多线程 创建线程需要耗时 3. 线程池 多线程模型创建线程耗时问题&#xff0c;提前创建 4. IO多路复用 在不创建进程和线程的前提下&#xff0c;对…

Kotlin | Android Provider 的实现案例

目标 使用 Android Room 实现持久化库。 代码 Kotlin 代码编写 DemoDatabase&#xff0c;在build生成 DemoDatabase_Impl 疑问 Provider的数据会存在设备吗&#xff1f; 内部存储: 当使用 Room 创建数据库&#xff08;如 DemoDatabase&#xff09;&#xff0c;数据库文件通常…

NFS服务

nfs文件系统 NFS:NetworkFileSystem网络文件系统&#xff0c;基于内核的文件系统。 服务安装 不固定端口启动&#xff0c;会注册到rpcbind&#xff08;固定端口&#xff09;服务上&#xff0c; 局域网适用[rootvm ~]# yum -y install nfs-utils # 依赖安装rpcbind [ro…

<C++学习>C++ 标准库(STD)的输入与输出(I/O)操作教程

C 的输入与输出主要通过标准库中的流类实现&#xff0c;包括标准输入流&#xff08;std::cin&#xff09;、标准输出流&#xff08;std::cout&#xff09;、标准错误流&#xff08;std::cerr&#xff09;和文件流&#xff08;std::ifstream 和 std::ofstream&#xff09;。以下…

maven多模块项目编译一直报Failure to find com.xxx.xxx:xxx-xxx-xxx:pom:1.0-SNAPSHOT in问题

工作中项目上因为多版本迭代&#xff0c;需要对不同迭代版本升级版本号&#xff0c;且因为项目工程本身是多模块结构&#xff0c;且依然多个其他模块工程。 在将工程中子模块的pom.xml中版本号使用变量引用父模块中定义的版本号时&#xff0c;一直报Failure to find com.xxx.x…

来自通义万相的创意加速器:AI 绘画创作

来自通义万相的创意加速器&#xff1a;AI 绘画创作 通义万相动手搭建“通义万相”部署方案资源准备对象存储OSS&#xff08;手动部署&#xff09;DashScope 模型服务灵积云服务器ECS&#xff08;手动部署&#xff09;一键部署ROS Web文生图艺术与设计创作广告与营销物料生成教育…

【Uniapp-Vue3】组合式API中的组件的生命周期函数(钩子函数)

在Uniapp中生命周期函数用得较多的是onMounted和onUnmounted。 一、onMounted函数 如果我们想要获得DOM元素&#xff0c;就需要给DOM标签上添加ref属性&#xff0c;并定义一个相同属性名的变量。 但是我们输出这个DOM元素为NULL 如果我们使用onMounted就能获得到DOM元素&…

Web 品质样式表

《Web 品质样式表》是一个重要的指南&#xff0c;旨在帮助开发者提升网站的整体质量和用户体验。以下是一些关键点&#xff1a; 避免使用 <font> 标签&#xff1a;应使用 CSS 来设置显示网页上的字体尺寸。使用 <font> 标签会增加文档的规模&#xff0c;且使每次改…