這篇具有很好參考價(jià)值的文章主要介紹了ElementUI之Tree樹形控件使用。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。
簡(jiǎn)介
以下列出的屬性、事件、方法，可使用Tree控件實(shí)現(xiàn)節(jié)點(diǎn)的拖拽功能（可實(shí)現(xiàn)修改順序、更換父級(jí)節(jié)點(diǎn)功能）、點(diǎn)擊節(jié)點(diǎn)勾選復(fù)選框、只點(diǎn)擊箭頭圖標(biāo)展開和收縮節(jié)點(diǎn)、父子節(jié)點(diǎn)不級(jí)聯(lián)勾選、默認(rèn)展開全部節(jié)點(diǎn)功能文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-516201.html
基礎(chǔ)用法
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
export default {
data() {
return {
data: [{
label: '一級(jí) 1',
children: [{
label: '二級(jí) 1-1',
children: [{
label: '三級(jí) 1-1-1'
}]
}]
}, {
label: '一級(jí) 2',
children: [{
label: '二級(jí) 2-1',
children: [{
label: '三級(jí) 2-1-1'
}]
}, {
label: '二級(jí) 2-2',
children: [{
label: '三級(jí) 2-2-1'
}]
}]
}, {
label: '一級(jí) 3',
children: [{
label: '二級(jí) 3-1',
children: [{
label: '三級(jí) 3-1-1'
}]
}, {
label: '二級(jí) 3-2',
children: [{
label: '三級(jí) 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
常用屬性
| 參數(shù) |
說明 |
類型 |
可選值 |
默認(rèn)值 |
| data |
展示數(shù)據(jù) |
array |
是 |
無(wú) |
| props |
配置選項(xiàng)，具體看下表 |
object |
是 |
無(wú) |
| check-strictly |
在顯示復(fù)選框的情況下，是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法，默認(rèn)為 false |
boolean |
是 |
false |
| check-on-click-node |
是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候選中節(jié)點(diǎn)，默認(rèn)值為 false，即只有在點(diǎn)擊復(fù)選框時(shí)才會(huì)選中節(jié)點(diǎn)。 |
boolean |
是 |
false |
| expand-on-click-node |
是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候展開或者收縮節(jié)點(diǎn)， 默認(rèn)值為 true，如果為 false，則只有點(diǎn)箭頭圖標(biāo)的時(shí)候才會(huì)展開或者收縮節(jié)點(diǎn)。 |
boolean |
是 |
true |
| default-expand-all |
是否默認(rèn)展開所有節(jié)點(diǎn) |
boolean |
是 |
false |
| draggable |
是否開啟拖拽節(jié)點(diǎn)功能 |
boolean |
是 |
false |
| show-checkbox |
節(jié)點(diǎn)是否可被選擇（開啟復(fù)選框） |
boolean |
是 |
false |
props
| 參數(shù) |
說明 |
類型 |
可選值 |
默認(rèn)值 |
| label |
指定節(jié)點(diǎn)標(biāo)簽為節(jié)點(diǎn)對(duì)象的某個(gè)屬性值 |
string, function(data, node) |
是 |
無(wú) |
| children |
指定子樹為節(jié)點(diǎn)對(duì)象的某個(gè)屬性值 |
string |
是 |
無(wú) |
常用事件
| 事件名稱 |
說明 |
回調(diào)參數(shù) |
| check-change |
節(jié)點(diǎn)選中狀態(tài)發(fā)生變化時(shí)的回調(diào) |
共三個(gè)參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、節(jié)點(diǎn)本身是否被選中、節(jié)點(diǎn)的子樹中是否有被選中的節(jié)點(diǎn) |
| node-drag-end |
拖拽結(jié)束時(shí)（可能未成功）觸發(fā)的事件 |
共四個(gè)參數(shù)，依次為：被拖拽節(jié)點(diǎn)對(duì)應(yīng)的 Node、結(jié)束拖拽時(shí)最后進(jìn)入的節(jié)點(diǎn)（可能為空）、被拖拽節(jié)點(diǎn)的放置位置（before、after、inner）、event |
常用方法
| 方法名 |
說明 |
參數(shù) |
| getCheckedNodes |
若節(jié)點(diǎn)可被選擇（即 show-checkbox 為 true），則返回目前被選中的節(jié)點(diǎn)所組成的數(shù)組 |
(leafOnly, includeHalfChecked) 接收兩個(gè) boolean 類型的參數(shù)，1. 是否只是葉子節(jié)點(diǎn)，默認(rèn)值為 false 2. 是否包含半選節(jié)點(diǎn)，默認(rèn)值為 false |
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-516201.html
到了這里，關(guān)于ElementUI之Tree樹形控件使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！
![[vue3] Tree/TreeSelect樹形控件使用](https://imgs.yssmx.com/Uploads/2024/02/477136-1.png)
![[vue]使用Element--Tree 樹形控件使用props解決自定義slot-scope=“{ node, data }“的對(duì)象問題](https://imgs.yssmx.com/Uploads/2024/02/516298-1.png)
