[vue.js] 树形结点多选框选择

vue.js前端代码:

<template><div><el-tree:data="treeData"node-key="id"show-checkboxref="tree"@check-change="handleCheckChange"/><el-button @click="getSelectedNodes">获取选中的节点</el-button><el-button @click="getSelectedLabels">获取选中的标签</el-button></div>
</template><script>
export default {data() {return {treeData: [{id: 1,label: '一级节点',children: [{ id: 2, label: '二级节点1' },{ id: 3, label: '二级节点2' }]},{id: 4,label: '一级节点',children: [{ id: 5, label: '二级节点1' },{ id: 6, label: '二级节点2' }]}],selectedNodes: [],selectedLabels: []};},methods: {handleCheckChange(node, checked) {console.log('节点:', node, '选中状态:', checked);},getSelectedNodes() {const checkedNodes = this.$refs.tree.getCheckedNodes(false, true); // 只返回完全选中的节点this.selectedNodes = checkedNodes;console.log('选中的节点:', checkedNodes);},getSelectedLabels() {const checkedNodes = this.$refs.tree.getCheckedNodes(false, true);const labels = checkedNodes.map(node => node.label);this.selectedLabels = labels;console.log('选中的标签:', labels);}}
};
</script>

运行的界面:
在这里插入图片描述
点击获取选中的节点:
在这里插入图片描述

点击“获取选择的标签”:
在这里插入图片描述

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

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

相关文章

Web 服务器基本工作流程

这是一个关于 ​​Web 服务器基本工作流程​​ 的全面解释。我们以最经典的 ​​客户端-服务器-后端​​ 三层架构为例&#xff0c;并结合你之前遇到的 Nginx 场景进行说明。​​核心角色​​​​客户端 (Client)​​&#xff1a; 通常是 ​​Web 浏览器​​ (Chrome, Firefox)…

IDEA 连接MySQL数据库

一、 连接数据库1、打开连接2、建立连接3、输入用户名和密码二、操作数据库1、选择数据库2、New| Query Console 查询控制台3、写查询语句4、New| SQL Script| sql Generator 生成这个数据库表的SQL结构New | SQL Script | Generate DDL to Query Console 在查询控制台生成…

江协科技STM32课程笔记(二)—外部中断EXTI

二、外部中断EXTI中断&#xff1a;在主程序运行过程中&#xff0c;出现了特定的中断触发条件&#xff08;中断源&#xff09;&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转而去处理中断程序&#xff0c;处理完成后又返回原来被暂停的位置继续运行。1、stm32中断简介…

Java常见排序算法实现

以下是Java中几种常见排序算法的实现&#xff0c;包括冒泡排序、选择排序、插入排序、快速排序和归并排序。 各排序算法特点说明&#xff1a;冒泡排序&#xff1a; 原理&#xff1a;重复比较相邻元素&#xff0c;将大的元素逐步"冒泡"到数组末尾特点&#xff1a;稳定…

Python爬虫实战:研究Pandas,构建地理信息数据采集和分析系统

1. 引言 1.1 研究背景 地理数据作为描述地球表面空间要素的数据,包含了丰富的空间位置、分布特征和属性信息,在城市规划、环境监测、商业分析等众多领域发挥着不可替代的作用。随着 "数字地球"、"智慧城市" 等概念的提出和发展,地理数据的重要性日益凸…

nvm安装node后出现报错: “npm 不是内部或外部命令,也不是可运行的程序 或批处理文件”

一、问题描述 使用nvm安装node后&#xff0c;使用npm命令报错如下 报错1&#xff1a;npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&#xff0c;然后再试一次。报错2&#xf…

【高等数学】第十二章 无穷级数——第二节 常数项级数的审敛法

上一节&#xff1a;【高等数学】第十二章 无穷级数——第一节 常数项级数的概念和性质 总目录&#xff1a;【高等数学】 目录 文章目录1. 正项级数及其审敛法1. 正项级数及其审敛法 正项级数 各项都是正数或零的级数称为正项级数正项级数收敛 正项级数 ∑n1∞un\displaystyle\…

图观 流渲染场景编辑器

一、 产品简介图观 流渲染场景编辑器&#xff0c;以编辑器插件形式&#xff0c;在Unreal Engine中轻松编辑并发布数字孪生场景。支持 GIS 全球/局部 数字孪生场景构建&#xff0c;并预置 图观技术架构工程模板&#xff0c;支持对 场景效果、镜头视野&#xff0c;环境时间气象、…

Visual Studio 函数头显示引用个数

在visual studio 里面有自带的显示引用方案 codeLens

数据结构的哈希表冲突解决方法

哈希表是一种高效的数据结构,通过哈希函数将键映射到存储位置。但由于哈希函数可能将不同键映射到相同位置(称为哈希冲突),需要有效的方法来解决冲突。以下是常见的冲突解决策略,每种方法都有其原理、优缺点和适用场景。我将逐步解释这些方法,确保内容清晰可靠。 1. 开放…

MySQL 基础概念与简单使用

MySQL 基础概念与简单使用 一、数据库基本概念 1、数据库定义 数据库&#xff08;Database&#xff09;是存储在计算机内、有组织、可共享的数据集合&#xff0c;用于高效地管理大量数据。 2、数据库分类 按数据模型分类&#xff1a; 关系型数据库&#xff08;如 MySQL、Oracle…

关系模型的数据结构

在关系数据库这个世界里&#xff0c;所有东西&#xff08;包括你要记录的人、物、事&#xff0c;以及它们之间的联系&#xff09;都用一种叫做“关系”的结构来表示。而这种“关系”的灵魂&#xff0c;就是“码”&#xff08;Key&#xff09;。1. 核心思想&#xff1a;万物皆“…

180 课时吃透 Go 语言游戏后端系列0:序言

零基础能学习 Go 游戏后端开发吗&#xff1f; 当然能学啦&#xff01;别担心&#xff0c;就算你之前对编程一窍不通&#xff0c;也完全没问题。我特意准备了180课时的开发课程&#xff0c;由浅入深、从理论到实践带领大家学会使用GO语言进行游戏后端开发。 编程就像学一门新语…

Android-SerialPort-API-master源码 串口调试 权限分析 定制

我把界面美化了一下Android-SerialPort-API-master源码 1.加了发送按钮 2.加上固定/dev/ttyGS1和GS9串口权限问题已经查清楚了。app与PosServer都是使用google的SerialPort方案。我做的app 都多使用一个函数available()&#xff0c;这个函数是非常有用的。在上位机发送单条指令…

KVM 入门使用手册

KVM 入门使用手册 1. 概述 2. 安装 在 Ubuntu/Debian 上安装 在 RHEL/CentOS/Fedora 上安装 3. 网络配置 查看默认网络 使用桥接网络 (推荐用于服务器) 4. 创建虚拟机 方法一:使用图形界面 (virt-manager) 方法二:使用命令行 (virt-install) 5. 管理虚拟机 使用 `virsh` 命令…

Devise Ruby身份验证解决方案全攻略

文章目录 前言Devise到底是什么&#xff1f;为什么选择Devise&#xff1f;环境准备Devise安装指南第一步&#xff1a;添加Devise到你的Gemfile第二步&#xff1a;初始化Devise第三步&#xff1a;生成用户模型第四步&#xff1a;运行数据库迁移 Devise核心模块详解Database Auth…

68-python操作SQLite

1. 了解SQLite SQLite&#xff0c;是一款轻型的数据库&#xff0c;是遵守ACID的关系型数据库管理系统&#xff0c;它包含在一个相对小的C库中。它是D.RichardHipp建立的公有领域项目。它的设计目标是嵌入式的&#xff0c;而且已经在很多嵌入式产品中使用了它&#xff0c;它占用…

在Qt项目中使用QtConcurrent::run,实现异步等待和同步调用

在使用Qt进行开发时&#xff0c;经常需要使用异步方法&#xff0c;不同于C#的async/await&#xff0c;Qt中提供了QtConcurrent::run接口方法可供调用&#xff0c;习惯了C#的await&#xff0c;便想着能不能封装几个类似的函数在项目中使用&#xff0c;探索了下&#xff0c;有如下…

视频分类 pytorchvideo

目录 1. 速度 vs 精度分析 mvit: r2plus1d_r50 推理代码&#xff1a; x3d_xs推理代码&#xff1a; R(21)D X3D&#xff08;轻量级&#xff0c;速度快&#xff09; I3D&#xff08;经典 3D CNN&#xff09; 替换分类层&#xff08;适配你的任务&#xff09; https://gith…

OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!

近期&#xff0c;我们推出 OpenTiny NEXT —— OpenTiny的下一代企业级前端智能开发解决方案。这不仅是一次技术升级&#xff0c;更是一场用户交互范式的变革&#xff1a;从传统的人机交互升级成为人机交互范式和智能体交互范式的融合。我们坚信&#xff0c;每一个企业应用都值…