vue3+element-plus組件下拉列表,數組數據轉成樹形數據

引入組件

可以直接在項目中引入element-plus表格組件,如果需要變成下拉列表樣式需要添加以下屬性:

row-key 必填 最好給數字或唯一屬性 , 給每個節點設置id 不填的話 沒有辦法實現展開效果
load 這個是動態添加數據的 前提(開啟lazy ,表格數組里設置了hasChildren:true)
treeprops 是配置樹狀收縮數據的
treeprops :{hasChildren} 是否可收縮
treeprops :{children} 展開的子項

代碼示例:

 <el-table:data="(所需要的渲染數據)"row-key="id"style="width: 100%; border: 0.1px solid #ebeef5"v-loading="loading"lazy:load="load":tree-props="{ hasChildren: 'hasChildren', children: 'children' }"//>

普通數組轉換成樹形數據

 const transListDataToTreeData = (list, root) => {console.log(list);const arr = [];// 1.遍歷list.forEach(item => {// 2.首次傳入空字符串  判斷list的pid是否為0 如果為空就是一級節點if (item.pid === root) {// 找到之后就要去找item下面有沒有子節點  以 item.id 作為 父 id, 接著往下找const children = transListDataToTreeData(list, item.id);if (children.length > 0) {// 如果children的長度大于0,說明找到了子節點item.children = children;}// 將item項, 追加到arr數組中arr.push(item);console.log(arr);console.log(arr);}});return arr;};transListDataToTreeData(初始數組, "");

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/36042.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/36042.shtml
英文地址,請注明出處:http://en.pswp.cn/news/36042.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

使用MyEclipse如何部署Descriptor (XML)編輯器?

Descriptor (XML) Editor編輯器包含了高級的XML編輯功能&#xff0c;在本文中您將了解到這些編輯功能、Web XML編輯等&#xff0c;此功能包含在MyEclipse中可用。 MyEclipse v2023.1.2離線版下載 1. Web XML 編輯器 MyEclipse Web XML編輯器包括高級XML編輯功能&#xff0c;…

最新AI創作系統ChatGPT程序源碼+詳細搭建部署教程+微信公眾號版+H5源碼/支持GPT4.0+GPT聯網提問/支持ai繪畫+MJ以圖生圖+思維導圖生成!

使用Nestjs和Vue3框架技術&#xff0c;持續集成AI能力到系統&#xff01; 新增 MJ 官方圖片重新生成指令功能同步官方 Vary 指令 單張圖片對比加強 Vary(Strong) | Vary(Subtle)同步官方 Zoom 指令 單張圖片無限縮放 Zoom out 2x | Zoom out 1.5x新增GPT聯網提問功能、手機號注…

深入了解 Postman Test 校驗的使用方法

Postman 是一個廣泛使用的 API 開發工具&#xff0c;它允許開發人員測試 API 的各個方面&#xff0c;包括請求、響應、身份驗證等等&#xff0c;其中最常用的功能之一就是 Test 校驗。那今天就一起來看看 Postman 的 Test 校驗該如何使用。 Test 校驗是什么&#xff1f; Test…

【Spring】淺談spring為什么推薦使用構造器注入

目錄 一、前言 二、常見的三種注入方式 2.1 field注入 2.2 構造器注入 2.3 setter注入 三、構造器注入的好處 四、答疑 五、總結 一、前言 ? Spring框架對Java開發的重要性不言而喻&#xff0c;其核心特性就是IOC&#xff08;Inversion of Control&#xff0c; 控制反轉&…

RunLoop

1.CFRunLoopModeRef特征代表RunLoop對象內的運行模式(每個RunLoop對象內存中存在很多種運行模式,每個Mode運行模式下必然包含若干個有效的Source0/Source1/Timer/Observer數據序組) 2.RunLoop對象活躍(操作)啟動時能且僅能選擇某個Mode匹配currentMode(暗示Loop對象的操作運行必…

分類預測 | MATLAB實現BO-BiGRU貝葉斯優化雙向門控循環單元多輸入分類預測

分類預測 | MATLAB實現BO-BiGRU貝葉斯優化雙向門控循環單元多輸入分類預測 目錄 分類預測 | MATLAB實現BO-BiGRU貝葉斯優化雙向門控循環單元多輸入分類預測預測效果基本介紹模型描述程序設計參考資料 預測效果 基本介紹 1.Matlab實現BO-BiGRU貝葉斯優化雙向門控循環單元多特征分…

2.1.2 VisionOS——VisionOS 中的窗口化應用程序

在visionOS中&#xff0c;用戶可以使用窗口來呈現2D或3D內容&#xff0c;或者使用體積來呈現3D內容和對象。Unity 將這些窗口中的應用程序描述為“窗口應用程序”。 默認情況下&#xff0c;如果您構建針對visionOS 平臺的Unity 應用程序而未通過XR 插件管理器啟用PolySpatial …

React - useEffect函數的理解和使用

文章目錄 一&#xff0c;useEffect描述二&#xff0c;它的執行時機三&#xff0c;useEffect分情況使用1&#xff0c;不寫第二個參數 說明監測所有state&#xff0c;其中一個變化就會觸發此函數2&#xff0c;第二個參數如果是[]空數組&#xff0c;說明誰也不監測3&#xff0c;第…

gRPC vs REST:創建API的方法比較

本文對gRPC和REST的特征和區別進行了介紹&#xff0c;這可能是當今創建API最常用的兩種方法。 文章目錄 一、gRPC的介紹 二、什么是REST&#xff1f; 三、什么是gRPC? 四、gRPC和REST的比較 &#xff08;1&#xff09;底層HTTP協議 &#xff08;2&#xff09;支持的數據…

平替 Docker - 玩轉容器新利器 Podman Desktop (視頻)

《OpenShift 4.x HOL教程匯總》 在 podman-desktop 1.2.1 podman 4.4 環境中驗證。 文章目錄 什么是 podman 和 podman-desktop安裝 podman 和 podman-desktop 基本環境Image、Container 和 Pod 的基本操作拉取 Image運行 Container 將 Pod 部署到 Kubernetes安裝 Kind 擴展插…

Python爬蟲——selenium_元素定位

元素定位&#xff1a;自動化要做的就是模擬鼠標和鍵盤來操作這些元素&#xff0c;點擊&#xff0c;輸入等等。操作這些元素前首先要找到它們&#xff0c;WebDriver提供很多定位元素的方法 from selenium import webdriver# 創建瀏覽器對象 path files/chromedriver.exe brows…

【安全】淺談信息安全

信息安全 理解信息安全&#xff0c;要從“信息”、“安全”兩個角度入手。 信息 信息是對客觀世界的反映&#xff0c;表現客觀事物的運動狀態和變化的實質內容。 信息具有可識別、可傳載、可共享、可度量的基本特征。 信息系統 信息系統是獲取&#xff08;收集&#xff0…

中心對稱鏈表

文章目錄 1 題目2 思路2.1 思路一2.2 思路二2.3 考點2.4 擴展 3 實現3.1 思路13.2 思路23.3 完整例子 1 題目 已知長度為n&#xff08;n>1&#xff09;的單鏈表&#xff0c;表頭指針為L&#xff0c;結點結構由data和next兩個域構成&#xff0c;其中data域為字符型&#xff…

Linux RPM包安裝、卸載和升級(rpm命令)詳解

(轉載請刪除括號里的內容) 下面講解一下&#xff0c;如何使用 rpm 命令對 RPM 二進制包進行安裝、卸載和升級操作。我們以安裝 apache 程序為例。 RPM包默認安裝路徑 通常情況下&#xff0c;RPM 包采用系統默認的安裝路徑&#xff0c;所有安裝文件會按照類別分散安裝到下表所…

優漫動游 大廠需要什么樣的ui設計師呢?

通常來說大公司UI設計的流程主要是這樣的&#xff1a;創意-頭腦風暴-策劃方案-交互設計&評審-美術設計&評審-開發實施&#xff0c;不過實際上大多數公司都有自己的一套流程&#xff0c;源于公司的基因、公司組織體系、公司領導風格。一起了解大廠需要什么樣的ui設計師呢…

谷粒商城第十一天-品牌管理中關聯分類

目錄 一、總述 二、前端部分 1. 調整查詢調用 2. 關聯分類 三、后端部分 四、總結 一、總述 之前是在商品的分類管理中直接使用的若依的逆向代碼 有下面的幾個問題&#xff1a; 1. 表格上面的參數填寫之后&#xff0c;都是按照完全匹配進行搜索&#xff0c;沒有模糊匹配…

nodejs實現前后端websocket通信+心跳示例

nodejs后端代碼 server.js //需要安裝ws模塊 npm install ws const WebSocket require("ws") const port 8085const ws new WebSocket.Server({port})ws.on("connection", (socket) > {socket.on("message",(message) > {const da…

自定義hook之首頁數據請求動作封裝 hooks

本例子實現了自定義hook之首頁數據請求動作封裝 hooks&#xff0c;具體代碼如下 export type OrganData {dis: Array<{ disease: string; id: number }>;is_delete: number;name: string;organ_id: number;parent_id: number;sort: number; }; export type SwiperData …

【STM32】簡介

&#x1f6a9; WRITE IN FRONT &#x1f6a9; &#x1f50e; 介紹&#xff1a;"謓澤"正在路上朝著"攻城獅"方向"前進四" &#x1f50e;&#x1f3c5; 榮譽&#xff1a;2021|2022年度博客之星物聯網與嵌入式開發TOP5|TOP4、2021|2022博客之星T…

(2)linux虛擬機配置中文輸入法和如何下載軟件

&#xff08;一&#xff09;配置中文輸入法&#xff1a; 1、sudo apt-get install fcitx&#xff0c;安裝fcitx框架&#xff0c;安裝完成之后&#xff0c;選擇該框架 2、接下來輸入sudo apt-get install fcitx fcitx-googlepinyin&#xff0c;安裝谷歌輸入法之后&#xff0c;重…