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

1. 设置默认选中:

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

<el-tree
   ref="treeRef"
   :data="data"
   show-checkbox
   node-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-tree
      ref="treeRef"
      :data="data"
      show-checkbox
      node-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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/953140.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

javascrip基础语法

为什么学习 JavaScript? JavaScript 是 web 开发人员必须学习的 3 门语言中的一门&#xff1a; HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为 1. JavaScript 输出 1.1 console.log()&#xff1a;用于将信息输出到浏览器控制台&#xff0c;例如con…

大语言模型预训练、微调、RLHF

转发&#xff0c;如有侵权&#xff0c;请联系删除&#xff1a; 1.【LLM】3&#xff1a;从零开始训练大语言模型&#xff08;预训练、微调、RLHF&#xff09; 2.老婆饼里没有老婆&#xff0c;RLHF里也没有真正的RL 3.【大模型微调】一文掌握7种大模型微调的方法 4.基于 Qwen2.…

django基于Python的校园个人闲置物品换购平台

Django 基于 Python 的校园个人闲置物品换购平台 一、平台概述 Django 基于 Python 的校园个人闲置物品换购平台是专为校园师生打造的一个便捷、环保且充满活力的线上交易场所。它借助 Django 这一强大的 Python Web 开发框架&#xff0c;整合了校园内丰富的闲置物品资源&…

abap安装cl_json类

文章来自 SAP根据源码导入/ui2/cl_json类 - pikeduo - 博客园 新建一个se38程序&#xff0c;把源码放到里&#xff0c;源码如下 *----------------------------------------------------------------------* * CLASS zcl_json DEFINITION *----------------------------…

[OPEN SQL] ORDER BY排序数据

本次操作使用的数据库表为SFLIGHT&#xff0c;其字段内容如下所示 航班(SFLIGHT) 该数据库表中的部分值如下所示 OPEN SQL中的ORDER BY语句用于对数据库表中的数据进行排序 在查询数据的时候使用ORDER BY语句&#xff0c;则查询出来的结果会按照ORDER BY指定的字段进行排序 排序…

STM32F103ZET6战舰版单片机开发板PCB文件 电路原理图

资料下载地址&#xff1a;STM32战舰版单片机开发板PCB文件 电路原理图 1、原理图 2、PCB 3、板子介绍 一、核心芯片与性能 核心芯片&#xff1a;STM32F103ZET6&#xff0c;这是一款基于ARM Cortex-M3内核的高性能单片机。处理器频率&#xff1a;高达72MHz&#xff0c;确保了…

An FPGA-based SoC System——RISC-V On PYNQ项目复现

本文参考&#xff1a; &#x1f449; 1️⃣ 原始工程 &#x1f449; 2️⃣ 原始工程复现教程 &#x1f449; 3️⃣ RISCV工具链安装教程 1.准备工作 &#x1f447;下面以LOCATION代表本地源存储库的安装目录&#xff0c;以home/xilinx代表在PYNQ-Z2开发板上的目录 ❗ 下载Vivad…

GAN的应用

5、GAN的应用 ​ GANs是一个强大的生成模型&#xff0c;它可以使用随机向量生成逼真的样本。我们既不需要知道明确的真实数据分布&#xff0c;也不需要任何数学假设。这些优点使得GANs被广泛应用于图像处理、计算机视觉、序列数据等领域。上图是基于GANs的实际应用场景对不同G…

centos9设置静态ip

CentOS 9 默认使用 NetworkManager 管理网络&#xff0c;而nmcli是 NetworkManager 命令行接口的缩写&#xff0c;是一个用来进行网络配置、管理网络连接的命令工具&#xff0c;可以简化网络设置&#xff0c;尤其是在无头&#xff08;没有图形界面&#xff09;环境下。 1、 cd…

Idea日志乱码

问题描述 前提&#xff1a;本人使用windows Idea运行sh文件&#xff0c;指定了utf-8编码&#xff0c;但是运行过程中还是存在中文乱码 Idea的相关配置都已经调整 字体调整为雅黑 文件编码均调整为UTF-8 调整Idea配置文件 但是还是存在乱码&#xff0c;既然Idea相关配置已经…

R4-LSTM学习笔记

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 LSTM-火灾温度预测 导入数据数据可视化设置X、y构建模型调用模型个人总结LSTM 的基本结构细胞状态&#xff08;Cell State&#xff09;LSTM 的优点 导入数据 i…

uniapp实现H5页面内容居中与两边留白,打造类似微信公众号阅读体验

在 UniApp 中&#xff0c;由于需要兼容多端应用&#xff0c;我们通常使用 rpx 作为尺寸单位。然而&#xff0c;在某些情况下&#xff0c;如需要实现内容居中且两边留白时&#xff0c;直接使用 rpx 可能会带来一些限制。这时&#xff0c;我们可以考虑使用 px 或 rem 等单位&…

网工_网络体系结构

2024.01.09&#xff1a;网络工程学习笔记&#xff08;网工老姜&#xff09; 第1节 网络体系结构 1.1 计算机一切皆011.2 网络协议1.3 协议的分层模型1.4 主机1向主机2发送数据过程1.5 本章小结 1.1 计算机一切皆01 在计算机内部&#xff0c;所有的数据最终都是以01的方式存在的…

CI/CD 流水线

CI/CD 流水线 CI 与 CD 的边界CI 持续集成CD&#xff08;持续交付/持续部署&#xff09;自动化流程示例&#xff1a; Jenkins 引入到 CI/CD 流程在本地或服务器上安装 Jenkins。配置 Jenkins 环境流程设计CI 阶段&#xff1a;Jenkins 流水线实现CD 阶段&#xff1a;Jenkins 流水…

编程题-二分查找

题目&#xff1a; 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1 解法一&#xff08;循环遍历查找&#xff09;&#xff…

OOM排查思路

K8S 容器的云原生生态&#xff0c;改变了服务的交付方式&#xff0c;自愈能力和自动扩缩等功能简直不要太好用。 有好的地方咱要夸&#xff0c;不好的地方咱也要说&#xff0c;真正的业务是部署于容器内部&#xff0c;而容器之外&#xff0c;又有一逻辑层 Pod 。 对于容器和…

Github Copilot学习笔记

&#xff08;一&#xff09;Prompt Engineering 利用AI工具生成prompt设计好的prompt结构使用MarkDown语法&#xff0c;按Role, Skills, Constrains, Background, Requirements和Demo这几个维度描述需求。然后收输入提示词&#xff1a;作为 [Role], 拥有 [Skills], 严格遵守 […

在 Rider 中使用 C# 创建 Windows 窗体应用 Winforms

1&#xff0c;创建项目 new solution 创建一个解决方案 2&#xff0c;打开设计器 在 Form1.cs 上右键打开设计器 认识一下 Rider 的界面 参考微软官方的例子&#xff0c;添加如下属性&#xff1a;注&#xff1a;这里 Listbox 的大小设置成 120, 94 失败&#xff0c;默认的是 12…

R数据分析:多分类问题预测模型的ROC做法及解释

有同学做了个多分类的预测模型,结局有三个类别,做的模型包括多分类逻辑回归、随机森林和决策树,多分类逻辑回归是用ROC曲线并报告AUC作为模型评估的,后面两种模型报告了混淆矩阵,审稿人就提出要统一模型评估指标。那么肯定是统一成ROC了,刚好借这个机会给大家讲讲ROC在多…

#Java-集合进阶-Map

1.Map 声明1 1.1 双列集合的特点 单列集合一次只能添加一个元素&#xff0c;双列集合一次可以添加一对元素 例&#xff1a; 小米手机2000华为手机5000苹果手机9000 这三对元素&#xff0c;左边的我们称之为键&#xff0c;右边的称为值。他们是一一对应的关系 所以双列集合中…