elementUI如何動態(tài)給el-tree添加子節(jié)點數據children詳解
更新時間：2022年11月11日 11:36:39 作者：十月ooOO
element-ui 目前基本成為前端pc網頁端標準ui框架,下面這篇文章主要給大家介紹了關于elementUI如何動態(tài)給el-tree添加子節(jié)點數據children的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
一、需求
有這樣一個數據結構的 tree。
element 的 tree 懶加載是從根上就開始懶加載，但我需要實現(xiàn)的是已經存在一個層級的 tree 結構，只是在末端點擊的時候，載入末端以下的列表。
二、實現(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é)點的完整數據，你只需要
- 用其中的
id或者其它自己定義的標識字段，去獲取對應的數據 - 然后再格式化成
tree的數據 - 重新賦值給當前節(jié)點的
children字段即可
2. tree 的實例方法：updateKeyChildren
此時你還需要用到 tree 的另一個方法： updateKeyChildren。
其作用的就是根據你提供的節(jié)點的 id，設置這個節(jié)點的 children 數據，剛好是要用到的。
3. 自動展示當前被點擊的節(jié)點
點擊并插入當前節(jié)點的 children 數據之后，需要它自動展開
只需要設置 tree 參數中的 default-expanded-keys 為當前節(jié)點的 key 即可
this.defaultExpandedKeys = [nodeData.id]
4. 頁面重新加載后，定位到當前的位置
頁面的 url 參數中保留幾個參數： projectid devicename index
- 頁面重載之后，用 projectid 來獲取內部數據
- 添加到已有的樹結構中
- 再使用 tree 組件的 setCurrentNode(nodeKey) 方法來選中該選中的節(jié)點
當然，這個實現(xiàn)過程還是有點繁瑣的。
頁面重新刷新，其結果就是：
// 存在 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. 參考代碼
// 根據 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)
})
},
三、結果
補充：el-tree子節(jié)點添加el-switch開關
一開始覺得在子節(jié)點添加開關是很難的事，主要是想復雜了，哎，走了好多彎路，一直想的是把子節(jié)點提取出來，然后給賦值，這樣就可以在子節(jié)點顯示出開關，然后被后端一語點醒，不用那么麻煩，他已經給了顯示與否的值，只是我一直沒想明白，想來真的是令人尷尬。
效果圖
代碼
<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>
//根據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(), "這是數據");
},
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é)點的方法。
總結
到此這篇關于elementUI如何動態(tài)給el-tree添加子節(jié)點數據children的文章就介紹到這了,更多相關elementUI給el-tree添加子節(jié)點數據內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue如何進行數據代理,通過本文學習我們了解如何代理的及驗證兩條線的問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
fontawesome的圖標有免費版和專業(yè)版,本文主要使用free版本,一般free版本的圖標夠用,free圖標又劃分為三個圖標庫,主要有實心圖標solid、常規(guī)圖標regular及品牌圖標brand,根據需求去下載對應的圖標庫,無須全部下載,對vue?fontawesome圖標庫相關知識感興趣的朋友一起看看吧2023-12-12
最近做的項目用到了全選全不選功能，于是我就自己動手寫了一個，基于vue使用監(jiān)聽實現(xiàn)全選反選功能，具體實例代碼大家參考下本文2018-07-07
基于vue實現(xiàn)滾動條滾動到指定位置對應位置數字進行tween特效
這篇文章主要介紹了基于vue實現(xiàn)滾動條滾動到指定位置對應位置數字進行tween特效,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue中設置echarts寬度自適應的問題及解決方案,常常需要做到echarts圖表的自適應，一般是根據頁面的寬度做對應的適應，本文記錄一下設置echarts圖表的自適應的步驟，需要的朋友可以參考下2022-09-09
vue-electron項目創(chuàng)建記錄及問題小結解決方案
這篇文章主要介紹了vue-electron項目創(chuàng)建記錄及注意事項,本文給大家分享了運行項目報錯的問題小結及多種解決方案,需要的朋友可以參考下2024-03-03
本文主要介紹了Vue中this.$nextTick()的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了Vue.js中引入圖片路徑的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
在Vue項目開發(fā)中,數據可視化是一項重要的任務,Echarts是一個由百度開源的數據可視化庫,提供了豐富的圖表類型和強大的交互功能,其中,K線圖常用于展示金融數據的走勢,本文將詳細介紹如何在Vue項目中引入Echarts并繪制K線圖,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了Vue.js實戰(zhàn)之組件之間的數據傳遞的相關資料，文中通過示例代碼和圖文介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04