[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
英文地址,請注明出處:http://en.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;每一個企業應用都值…