Element控件Tree實現數據樹形結構的示例代碼

更新時間：2023年08月01日 10:06:47 作者：覺醒法師

我們在開發(fā)中肯定會遇到用樹形展示數據的需求,本文主要介紹了Element控件Tree實現數據樹形結構的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

在前端開發(fā)中，有時會遇到所有菜單數據在同一級的情況，后端未對數據進行分級處理；但前端渲染需要是樹狀結構的數據，如何實現數據的樹狀化？將數組中通過父節(jié)點的ID與子節(jié)點的parentId關聯，通過遞歸函數來實現。

前端框架這里使用element-ui的tree控件來實現，對其不了解可以去官網查看文檔。

地址：Element - The world's most popular Vue UI framework

一、創(chuàng)建頁面

這里就不講vue項目的搭建了，基礎不好的，可以去官網查看文檔。

首先在src/pages目錄中，創(chuàng)建element-trees文件夾，再創(chuàng)建index.vue，代碼如下：

<template>
  <div class="tree-container">
  </div>
</template>
<script>
  export default {
    data(){
      return {}
    },
    created() {},
    methods: {}
  }
</script>
<style lang="scss">
</style>

在類選擇器tree-container容器中，添加相關按鈕和Tree控件，以及給容器添加些樣式進行修飾一下，代碼如下：

<template>
  <div class="tree-container">
    <div class="top-box">
      <el-button type="primary" size="mini" @click="appendNode">添加菜單</el-button>
      <el-button type="info" size="mini" @click="removeSelected">刪除選中項</el-button>
    </div>
    <el-tree
    	ref="tree"
    	:data="treeData"
    	:props="props"
    	accordion
    	show-checkbox
    	node-key="id"
    	default-expand-all
    	:expand-on-click-node="false">
    	<span class="custom-tree-node" slot-scope="{ node, data }">
    		<span>{{ node.label }}</span>
    		<span>
    			<el-button type="text" size="mini" @click="append(data)">添加</el-button>
    			<el-button type="text" size="mini" @click="editor(data)">修改</el-button>
    			<el-button type="text" size="mini"	@click="remove(node, data)">刪除</el-button>
    		</span>
    	</span>
    </el-tree>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        props: {
        	label: 'name',
        	children: 'children'
        },
        treeData: []
      }
    },
    created() {},
    methods: {
      //添加父節(jié)點數據
      appendNode(){},
      //添加子項數據
      append(data){},
      //編輯數據
      editor(data){},
      //移出項目
      remove(node, data){},
      //刪除選中的節(jié)點
      removeSelected(){}
    }
  }
</script>
<style lang="scss">
.tree-container{ width: 360px; font-size: 12px;
  .top-box{ text-align: right; padding-bottom: 20px; }
}
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}
</style>

此時頁面效果如下：

二、模擬數據

在element-trees文件夾中添加data.js文件，用來存儲模擬數據。代碼如下：

/**
 * 模擬數據
 */
const dataList = [
  {
    "name": "網絡安全滲透工程師體系大綱",
    "pid": 0,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 1
  },
  {
    "name": "WEB通信、前后端原理",
    "pid": 1,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 2
  },
  {
    "name": "信息收集",
    "pid": 1,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 3
  },
  {
    "name": "注入全方位利用+數據庫注入",
    "pid": 1,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 4
  },
  {
    "name": "前端滲透、文件上傳解析漏洞",
    "pid": 1,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 5
  },
  {
    "name": "漏洞利用",
    "pid": 1,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 6
  },
  {
    "name": "漏洞挖掘",
    "pid": 1,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 7
  },
  {
    "name": "Web服務器通信原理",
    "pid": 2,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 8
  },
  {
    "name": "后端基礎SQL",
    "pid": 2,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 9
  },
  {
    "name": "數據庫簡介及SQL語法",
    "pid": 2,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 10
  },
  {
    "name": "后端基礎SQL高級查詢與子查詢",
    "pid": 2,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 11
  },
  {
    "name": "后端基礎PHP簡介及基本函數上",
    "pid": 2,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 12
  },
  {
    "name": "后端基礎PHP—表單驗證",
    "pid": 2,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 13
  },
  {
    "name": "正則表達式",
    "pid": 2,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 14
  },
  {
    "name": "信息搜集的意義 — 滲透測試的靈魂",
    "pid": 3,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 15
  },
  {
    "name": "信息收集（一）",
    "pid": 3,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 16
  },
  {
    "name": "網絡架構-信息收集",
    "pid": 3,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 17
  },
  {
    "name": "前端-信息收集",
    "pid": 3,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 18
  },
  {
    "name": "系統-信息收集",
    "pid": 3,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 19
  },
  {
    "name": "SQL注入的原理",
    "pid": 4,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 20
  },
  {
    "name": "滲透測試常用工具講解",
    "pid": 4,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 21
  },
  {
    "name": "POST注入/HEAD注入",
    "pid": 4,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 22
  },
  {
    "name": "盲注",
    "pid": 4,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 23
  },
  {
    "name": "XSS的原理分析與解剖",
    "pid": 5,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 24
  },
  {
    "name": "存儲型XSS",
    "pid": 5,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 25
  },
  {
    "name": " Dom Based XSS",
    "pid": 5,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 26
  },
  {
    "name": "XXE實體注入",
    "pid": 6,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 27
  },
  {
    "name": "SSRF-服務器端請求偽造",
    "pid": 6,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 28
  },
  {
    "name": "驗證碼繞過、密碼找回漏洞",
    "pid": 7,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 29
  },
  {
    "name": "平行越權、垂直越權",
    "pid": 7,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 30
  },
  {
    "name": "支付漏洞",
    "pid": 7,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 31
  },
  {
    "name": "Sql注入",
    "pid": 7,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 32
  },
  {
    "name": "變量覆蓋漏洞",
    "pid": 6,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 33
  },
  {
    "name": "本地包含與遠程包含",
    "pid": 6,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 34
  },
  {
    "name": "unserialize反序列化漏洞",
    "pid": 6,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 35
  },
  {
    "name": "CSRF",
    "pid": 5,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 36
  },
  {
    "name": "文件上傳解析漏洞",
    "pid": 5,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 37
  },
  {
    "name": "寬字節(jié)注入",
    "pid": 4,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 38
  },
  {
    "name": "Accsess注入 — Cookie注入",
    "pid": 4,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 39
  },
  {
    "name": "Accsess注入 — 偏移注入",
    "pid": 4,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 40
  },
  {
    "name": "MySQL注入 — Dns 注入",
    "pid": 4,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 41
  },
  {
    "name": "MSSQL注入 — 反彈注入",
    "pid": 4,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 42
  },
  {
    "name": "Oracle注入 — 報錯注入",
    "pid": 4,
    "createtime": "2023-03-29",
    "updatetime": "2023-03-29",
    "id": 43
  }
];
export default dataList;

文件創(chuàng)建好后，我們將其引入到index.vue文件中，代碼如下：

<script>
  import DataList from './data'
  export default {
    data(){
      return {
        props: {
        	label: 'name',
        	children: 'children'
        },
        treeData: []
      }
    },
    created() {
      this.loadNode();
    },
    methods: {
	  //加載節(jié)點數據
      loadNode(){
        this.treeData = DataList.map(item => item);
      },
      //略...
    }
  }
</script>

如上代碼，通過loadNode()函數執(zhí)行后，模擬數據則已與Tree控件進行了雙方綁定。但是頁面中顯示的數據，全都顯示在同級位置。數據的歸類分級，我們在后面再講解。頁面效果如下：

三、遞歸函數

此時離成功緊一步之遙了，我們先來分析下data.js中的數據結構。如下圖：

如何將數據歸類分級呢，可以通過循環(huán)判斷，每級的id與數據中的pid進行關聯；比如第一條數據id為1，將數組進行遍歷查詢判斷pid有為1的數據，則表示其有子項數據，將其子項數據添加到children數組中。pid為0的為一級數據，所以當定義遞歸函數時，傳入的pid默認為0。

這里層次有可能是1層，2層，3層...... n層，要一層一層循環(huán)判斷，就太麻煩了；所以這里我們要使用遞歸方法，來實現n層級的數據處理。

在src下創(chuàng)建utils/utils.js文件，在utils.js中定義遞歸函數，代碼如下：

/**
  * 遞歸函數
  * @param arr 數組
  * @param pid 父ID，不傳默認為0
  */
export const DGFilterTrees = (arr, pid = 0) => {
	let newArr = [];
	//循環(huán)數組
	arr.forEach((item, i) => {
		//判斷pid與遍歷元素中pid相同的數據，相等的為同級數據，追加到該級數組中
		if(item.pid == pid){
			newArr.push(item);
			/**
             * 判斷該item元素是否有子項
             * 當數組中有元素的pid與item.id相等，some函數會返回true，表示該元素有子項數據
             */
			if(arr.some(ele => ele.pid == item.id)){
				//此時，通過重新調用本函數進行遞歸處理
				item['children'] = DGFilterTrees(arr, item.id);
			}
		}
	});
	return newArr;
}

注：遞歸算法是一種直接或者間接調用自身函數或者方法的算法。

遞歸算法的特點：

遞歸就是方法里調用自身。
在使用遞增歸策略時，必須有一個明確的遞歸結束條件，稱為遞歸出口。
遞歸算法解題通常顯得很簡潔，但遞歸算法解題的運行效率較低。所以一般不提倡用遞歸算法設計程序。
在遞歸調用的過程當中系統為每一層的返回點、局部量等開辟了棧來存儲。遞歸次數過多容易造成棧溢出等，所以一般不提倡用遞歸算法設計程序。

所以在使用遞歸算法時，一定要注意判斷條件能正常退出，否則無法靠自身的控制終止的循環(huán)，會導致棧溢出，程序卡死等問題。

將DGFilterTrees()遞歸函數引入到index.vue中，將模擬數據重組，代碼如下：

<script>
  import DataList from './data'
  import DGFilterTrees from '@/utils/utils.js'
  export default {
    data(){
      return {
        props: {
        	label: 'name',
        	children: 'children'
        },
        treeData: []
      }
    },
    created() {
      this.loadNode();
    },
    methods: {
	  //加載節(jié)點數據
      loadNode(){
        this.treeData = DGFilterTrees(DataList);
      },
      //略...
    }
  }
</script>

此時，所有數據都進行了歸類分級顯示，頁面的效果圖如下：

四、選中后顯示按鈕

如上圖，我們會發(fā)現每項后面的添加、修改、刪除全顯示出來，會顯示擁擠并不方便操作。這里我們將節(jié)點輸出后會發(fā)現，可以使用isCurrent來判斷，只顯示選中當前項的按鈕。

在span標簽上添加v-if，判斷node.isCurrent是否為true，代碼如下：

<el-tree
	ref="tree"
	:data="treeData"
	:props="props"
	accordion
	show-checkbox
	node-key="id"
	default-expand-all
	:expand-on-click-node="false">
	<span class="custom-tree-node" slot-scope="{ node, data }">
		<span>{{ node.label }}</span>
		<span v-if="node.isCurrent">
			<el-button type="text" size="mini" @click="append(data)">添加</el-button>
			<el-button type="text" size="mini" @click="editor(data)">修改</el-button>
			<el-button type="text" size="mini"	@click="remove(node, data)">刪除</el-button>
		</span>
	</span>
</el-tree>

如下圖，點擊選擇”后端基礎SQL“后，會顯示后面的操作按鈕。

五、刪除元素

這里我們是使用本地定義模擬數據進行操作的，所以沒有真實項目中是通過接口進行數據的增刪改查部分。代碼如下：

//移出項目
remove(node, data){
	if(Array.isArray(data['children'])&&data.children.length>0){
		this.$message.error('當前數據有子項，無法刪除~');
		return;
	}
	//查詢數據位置索引
	let index = DataList.findIndex(item => item.id==data.id);
	//刪除指定位置數據
	DataList.splice(index, 1);
	//重新加載數據
	this.loadNode();
}

效果如下圖：

六、刪除多選項

這里需要使用Tree控件的getCheckedNodes()函數，來獲取被選中項；然后通過循環(huán)，刪除每條被選中元素，代碼如下：

//移出項目
remove(node, data){
	if(Array.isArray(data['children'])&&data.children.length>0){
		this.$message.error('當前數據有子項，無法刪除~');
		return;
	}
	//查詢數據位置索引
	let index = DataList.findIndex(item => item.id==data.id);
	//刪除指定位置數據
	DataList.splice(index, 1);
	//重新加載數據
	this.loadNode();
}

效果如下圖：

本期就先介紹到這，添加、修改等功能也比較簡單，可以通過element-ui的$prompt彈框控件來實現。

到此這篇關于Element控件Tree實現數據樹形結構的示例代碼的文章就介紹到這了,更多相關Element Tree樹形結構內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解vue2和vue3如何定義響應式數據
這篇文章主要是來和大家一起討論一下vue2和vue3是如何定義響應式數據的,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以了解下
2023-11-11
使用Vue+Element UI實現復選框刪除線效果
在開發(fā)報告生成、配置選擇等功能時,我們經常需要讓用戶選擇包含哪些內容,一個好的UI設計應該讓用戶清晰地看到哪些選項被選中,哪些被排除,本文將介紹如何使用Vue + Element UI實現一個優(yōu)雅的復選框刪除線效果,需要的朋友可以參考下
2026-01-01
Vue項目如何打包成移動端APP
這篇文章主要介紹了Vue項目如何打包成移動端APP,本文通過圖文示例相結合給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12
Vue不同項目之間傳遞、接收參數問題
這篇文章主要介紹了Vue不同項目之間傳遞、接收參數問題,主要針對是登錄操作，我們?yōu)榱送瓿蒘SO(Single Sign On)的效果，認證和授權在UC完成，用戶發(fā)起資源請求，服務網關會進行過濾，本文給大家介紹的非常詳細，需要的朋友可以參考下
2023-04-04
Vue3中使用i18n,this.$t報錯問題及解決
這篇文章主要介紹了Vue3中使用i18n,this.$t報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
利用Vue3 (一）創(chuàng)建Vue CLI 項目
這篇文章主要介紹利用Vue3 創(chuàng)建Vue CLI 項目，下面文章內容附有官方文檔鏈接，安裝過程，需要的可以參考一下
2021-10-10
Vue解決開發(fā)環(huán)境Ajax跨域問題的多種方法對比
本文將帶大家深入理解跨域原理,并提供 Vue CLI（webpack）和 Vite 兩種構建工具下的完整解決方案,讓大家的開發(fā)流程更順暢,希望對大家有所幫助
2025-11-11
前端Vue項目詳解--初始化及導航欄
這篇文章主要介紹了前端Vue項目詳解--初始化及導航欄,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下
2019-06-06
vue3數據監(jiān)聽watch/watchEffect的示例代碼
我們都知道監(jiān)聽器的作用是在每次響應式狀態(tài)發(fā)生變化時觸發(fā)，在組合式?API?中，我們可以使用?watch()函數和watchEffect()函數,下面我們來看下vue3如何進行數據監(jiān)聽watch/watchEffect，感興趣的朋友一起看看吧
2023-02-02
部屬vue項目,訪問路徑設置非根,顯示白屏的解決方案
這篇文章主要介紹了部屬vue項目,訪問路徑設置非根,顯示白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04