ElementUI Tree 樹形控件的使用并給節(jié)點添加圖標
前言：
因為項目需要用Vue做一個管理系統(tǒng)，其中有一個公司部門的管理頁面有用到ElementUI 的樹形控件，但是結構中沒有使用chexkBox選項框，針對這個功能碰到的一些問題做一下總結
一，數(shù)據(jù)渲染
1）在<el-tree>標簽中綁定data屬性
2）在vue實例的data中聲明list變量
3）從后臺獲取到的數(shù)據(jù)是以數(shù)組里面嵌套多個對象的結構并賦值給list，
當前的數(shù)據(jù)是OrgName為當前結構名稱，
Children作為子分支數(shù)組，
子分支中的結構與當前結構一致
4）在頁面中展示結構的方法是在<el-tree>標簽中綁定porps屬性，
并在vue實例的data中用label屬性定義顯示的名稱，
用childern屬性綁定展示的子分支數(shù)據(jù)
5）最后展示的結構如下
二，點擊當前分支獲取當前分支與上級分支的值
1）此處使用的是@node-click事件并綁定一個函數(shù)，
函數(shù)在vue實例的methods中定義，并可以接收兩個參數(shù)node與data
2）node是一個對象，
就是點擊當前分支獲得的數(shù)據(jù)，
如果只需要當前層級的數(shù)據(jù)的話就可以使用node，
后臺有一并返給我上級的ID，
但是頁面中點擊分支后還需要顯示上級的名稱，
所以此處使用node就不太夠
3）data同樣也是一個對象，
他的data屬性包含的就是當前分支的值，
其中的parent屬性就包含了他上級的值，
甚至里面的parent屬性還包含更上一級的值一直到最外層，
可以根據(jù)自己當前項目的需要來選擇使用data還是node來取到自己需要的值
三，el-tree 樹形控件給節(jié)點添加圖標
<template>
<div class="tree">
<el-tree :data="data5" node-key="id" default-expand-all >
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<i :class="node.icon"></i>{{ node.label }}
</span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
data () {
return {
data5: [{
id: 1,
label: '一級 1',
icon:'el-icon-success',
children: [{
id: 4,
label: '二級 1-1',
children: [{
id: 9,
label: '三級 1-1-1',
icon: 'el-icon-info'
}, {
id: 10,
label: '三級 1-1-2'
}]
}]
}, {
id: 2,
label: '一級 2',
children: [{
id: 5,
label: '二級 2-1',
}, {
id: 6,
label: '二級 2-2'
}]
}, {
id: 3,
label: '一級 3',
children: [{
id: 7,
label: '二級 3-1'
}, {
id: 8,
label: '二級 3-2'
}]
}]
}
}
}
</script>
<style scoped>
</style>
到此這篇關于ElementUI Tree 樹形控件的使用并給節(jié)點添加圖標的文章就介紹到這了,更多相關Element Tree 樹形控件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了在Vuex中關于getters和actions使用的補充作了簡要說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2021-09-09
這篇文章主要介紹了使用vue項目配置多個代理的注意點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
vue3中的數(shù)據(jù)劫持的最新實現(xiàn)方案的proxy示例詳解
Vue3中使用Proxy實現(xiàn)數(shù)據(jù)劫持,解決了Vue2中數(shù)組和對象劫持的遺留問題,Proxy可以修改某些操作的默認行為,通過get和set方法實現(xiàn)數(shù)據(jù)的劫持和保護機制,感興趣的朋友跟隨小編一起看看吧2024-11-11
EPUB.js是一個基于JavaScript的庫,用于從電子書中提取內(nèi)容,這篇文章主要為大家詳細介紹了vue如何使用epubjs實現(xiàn)電子書的功能,感興趣的小伙伴可以學習一下2023-11-11
Vue3造輪子之Typescript配置highlight過程
這篇文章主要介紹了Vue3造輪子之Typescript配置highlight過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
解決Vue中的生命周期beforeDestory不觸發(fā)的問題
這篇文章主要介紹了解決Vue中的生命周期beforeDestory不觸發(fā)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了使用ElementUI修改el-tabs標簽頁組件樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
深入理解vue.js中$watch的oldvalue與newValue
這篇文章主要給大家介紹了關于vue.js中$watch的oldvalue與newValue的相關資料，文中通過示例代碼介紹的非常詳細，并且介紹了關于watch的其他測試，對大家學習或者使用vue.js具有一定的參考學習價值，需要的朋友們下面跟著小編來一起看看吧。2017-08-08
這篇文章主要介紹了如何將百度地圖包裝成Vue的組件的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
這篇文章主要給大家介紹了關于Vue3安裝dataV報錯問題解決方案的相關資料,dataV用于大屏展示,個人覺得比echarts簡單很多,需要的朋友可以參考下2023-06-06