elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children詳解
一、需求
有這樣一個數(shù)據(jù)結(jié)構的 tree。
element
的 tree 懶加載是從根上就開始懶加載,但我需要實現(xiàn)的是已經(jīng)存在一個層級的 tree 結(jié)構,只是在末端點擊的時候,載入末端以下的列表。
二、實現(xiàn)
1. tree 的實例事件 node-click
我們就不能用它的懶加載方法了,而是使用 node-click
這個事件
<el-tree ref="treeNav" :indent="10" :default-expanded-keys="defaultExpandedKeys" @node-click="treeNodeClicked" :data="treeData" :highlight-current="true" node-key="id"> </el-tree>
當點擊的事件說明:
點擊的時候你獲取到了:當前被點擊節(jié)點的完整數(shù)據(jù),你只需要
- 用其中的
id
或者其它自己定義的標識字段,去獲取對應的數(shù)據(jù) - 然后再格式化成
tree
的數(shù)據(jù) - 重新賦值給當前節(jié)點的
children
字段即可
2. tree 的實例方法:updateKeyChildren
此時你還需要用到 tree 的另一個方法: updateKeyChildren
。
其作用的就是根據(jù)你提供的節(jié)點的 id
,設置這個節(jié)點的 children
數(shù)據(jù),剛好是要用到的。
3. 自動展示當前被點擊的節(jié)點
點擊并插入當前節(jié)點的 children
數(shù)據(jù)之后,需要它自動展開
只需要設置 tree
參數(shù)中的 default-expanded-keys
為當前節(jié)點的 key
即可
this.defaultExpandedKeys = [nodeData.id]
4. 頁面重新加載后,定位到當前的位置
頁面的 url 參數(shù)中保留幾個參數(shù): projectid
devicename
index
- 頁面重載之后,用 projectid 來獲取內(nèi)部數(shù)據(jù)
- 添加到已有的樹結(jié)構中
- 再使用 tree 組件的 setCurrentNode(nodeKey) 方法來選中該選中的節(jié)點
當然,這個實現(xiàn)過程還是有點繁瑣的。
頁面重新刷新,其結(jié)果就是:
// 存在 projectId 時,加載對應項目的 preview 信息,并定位到之前的設備位置 if (this.currentProjectId){ this.getProjectPreviewOf(this.currentProjectId, projectPreview => { let checkedKey = `project-${this.currentProjectId}:${this.deviceName}` this.$refs.treeNav.setCurrentKey(checkedKey) this.SET_CURRENT_DEVICE_LIST(projectPreview[this.deviceName]) }) }
5. 參考代碼
// 根據(jù) projectId 獲取對應項目的 preview getProjectPreviewOf(nodeData){ areaApi .previewOfProject({ pid: nodeData.projectInfo.id }) .then(res => { let treeDataForPreview = this.getTreeDataFromPreview(res, nodeData.projectInfo.id) console.log('Tree data for preview: ',treeDataForPreview) this.$refs.treeNav.updateKeyChildren(nodeData.id, treeDataForPreview) // 展開當前節(jié)點 this.defaultExpandedKeys = [nodeData.id] // 默認展示:當前項目的第一個設備類型的設備 this.SET_CURRENT_DEVICE_LIST(treeDataForPreview[0].deviceInfos) }) },
三、結(jié)果
補充:el-tree子節(jié)點添加el-switch開關
一開始覺得在子節(jié)點添加開關是很難的事,主要是想復雜了,哎,走了好多彎路,一直想的是把子節(jié)點提取出來,然后給賦值,這樣就可以在子節(jié)點顯示出開關,然后被后端一語點醒,不用那么麻煩,他已經(jīng)給了顯示與否的值,只是我一直沒想明白,想來真的是令人尷尬。
效果圖
代碼
<template> <div> <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false" ref="tree" > <!-- v-show="data.swit" --> <span class="custom-tree-node" slot-scope="{ data }"> <span>{{data.label }}</span> //根據(jù)data.show!=null是否等于null來判斷顯示與否 <span v-if="data.show!=null" ><el-switch v-model="data.show" :active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" > </el-switch >{{data.show}} </span> <!-- --> </span> </el-tree> <el-button @click="handleNodeClick">獲取</el-button> </div> </template> <script> export default { data() { return { form: {}, // valuettt: false, data: [ { label: "aaa", show: null, children: [ { label: "aaa", show: null,//等于null不顯示開關 children: [ { label: "ccc", show: null, children: [ { label: "ccc", show: null, children: [ { label: "三級 3-1-1", show: true,//等于true顯示開關 children: [], }, ], }, ], }, { label: "eee", show: null, children: [ { label: "三級 3-2-2", show: true, children: [], }, ], }, ], }, ], }, { label: "二級 3-2", show: null, children: [ { label: "三級 3-2-1", show: true, children: [], }, ], }, ], defaultProps: { children: "children", label: "label", }, result: [], }; }, methods: { handleNodeClick() { // this.$refs.tree.updateKeyChildren(keys,treeData)//更新node-key的子節(jié)點 this.getAllLeaf(this.data); // console.log(this.$refs.tree.getCheckedNodes(), "這是數(shù)據(jù)"); }, getAllLeaf(data) { let result = []; function getLeaf(data) { data.forEach((item) => { if (item.children.length == 0) { // console.log(item.label,'item.label'); result.push(item.label); } else { // console.log(item.children,'item.children'); getLeaf(item.children); } }); } console.log(result, "data"); getLeaf(data); this.result = result; return result; }, }, mounted(){ this.handleNodeClick() } }; </script> <style> /* .custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; } */ </style>
由于我之前還想獲取子節(jié)點,所以代碼中還有獲取子節(jié)點的方法。
總結(jié)
到此這篇關于elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children的文章就介紹到這了,更多相關elementUI給el-tree添加子節(jié)點數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置指南
最近在使用vite生成項目,這篇文章主要給大家介紹了關于vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08ant-design-vue中的select選擇器,對輸入值的進行篩選操作
這篇文章主要介紹了ant-design-vue中的select選擇器,對輸入值的進行篩選操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue移動端使用appClound拉起支付寶支付的實現(xiàn)方法
這篇文章主要介紹了vue移動端使用appClound拉起支付寶支付的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11vue子組件實時獲取父組件的數(shù)據(jù)實現(xiàn)
本文主要介紹了vue子組件實時獲取父組件的數(shù)據(jù)實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12