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,一经查实,立即删除!

相关文章

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;可实现直观和精确的控制。 开发这种外骨骼的动机源于人们对深度学习和机器学习等领域日益增长的兴趣。这些技术使机器人能够自主学习…

浅尝Appium自动化框架

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

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元素&…

uniapp使用chooseLocation安卓篇

本文章全部以高德地图为例 代码 <view class"bottom"><button click"choose">定位</button> </view> choose() {uni.chooseLocation({success: function(res) {console.log(位置名称&#xff1a; res.name);console.log(详细地…

了解模2除法:原理与应用

模2除法&#xff0c;也被称为二进制除法或XOR除法&#xff0c;是一种在二进制数制下进行的特殊除法运算。与常规的十进制或其他进制的除法不同&#xff0c;模2除法使用异或&#xff08;XOR&#xff09;运算代替减法&#xff0c;并且不涉及进位或借位。这种除法运算在数字通信、…

基于 SSH 的任务调度系统

文末附有完整项目代码 在当今科技飞速发展的时代&#xff0c;任务调度系统的重要性日益凸显。本文将详细介绍一个基于 SSH&#xff08;SpringStruts2Hibernate&#xff09;的任务调度系统的设计与实现。 一、系统概述 本系统旨在改变传统人工任务调度方式&#xff0c;通过计算…

RFC 793

读 TCP 协议 RFC-793_rfc 793-CSDN博客TCP灌包中RTT时延与RTO超时关系 - konglingbin - 博客园 TCP的RTT算法 从前面的TCP重传机制我们知道Timeout的设置对于重传非常重要。 设长了&#xff0c;重发就慢&#xff0c;丢了老半天才重发&#xff0c;没有效率&#xff0c;性能差&…

Transformer:深度学习的变革力量

深度学习领域的发展日新月异&#xff0c;在自然语言处理&#xff08;NLP&#xff09;、计算机视觉等领域取得了巨大突破。然而&#xff0c;早期的循环神经网络&#xff08;RNN&#xff09;在处理长序列时面临着梯度消失、并行计算能力不足等瓶颈。而 Transformer 的横空出世&am…

计算机网络 笔记 数据链路层 2

1,信道划分&#xff1a; (1)时分复用TDM 将时间等分为“TDM帧”&#xff0c;每个TDM帧内部等分为m个时隙&#xff0c;m个用户对应m个时隙 缺点&#xff1a;每个节点只分到了总带宽的1/m,如果有部分的1节点不发出数据&#xff0c;那么就会在这个时间信道被闲置&#xff0c;利用…

vue el-table 数据变化后,高度渲染问题

场景&#xff1a;el-table设置了height属性&#xff0c;但是切换查询条件后再次点击查询重新获取data时&#xff0c;el-table渲染的高度会有问题&#xff0c;滚动区域变矮了。 解决办法&#xff1a;使用doLayout方法‌&#xff0c;在表格数据渲染后调用doLayout方法可以重新布局…

深度学习|表示学习|一个神经元可以干什么|02

如是我闻&#xff1a; 如果我们只有一个神经元&#xff08;即一个单一的线性或非线性函数&#xff09;&#xff0c;仍然可以完成一些简单的任务。以下是一个神经元可以实现的功能和应用&#xff1a; 1. 实现简单的线性分类 输入&#xff1a;一组特征向量 x x x 输出&#xff…