Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果
使用elementui樹組件,通過(guò)懶加載加載數(shù)據(jù),并設(shè)置默認(rèn)展開和全部選中的效果。
<el-tree
:load="loadNode"
node-key="org_id"
is-connection-line
show-checkbox
lazy
:default-checked-keys="defaultSelectCids"
:default-expanded-keys="defaultExpandedCids"
:props="defaultProps"
@check-change="handleCheckChange"
ref="orgTreeData"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span style="padding-left: 10px"> {{ data.in_service.count }} </span>
</span>
</el-tree>主要設(shè)置load替換data屬性。
還設(shè)置屬性lazy,以及default-checked-keys和default-expanded-keys屬性。并配置options的isLeaf屬性。
dataTree = [];
defaultProps = {
children: 'child',
label: 'org_name',
isLeaf: data => {
return !data.has_child;
},
};
defaultExpandedCids = []; // 選出所有pid為0的 cid節(jié)點(diǎn)
defaultSelectCids = []; // 選出所有cid
async loadNode(node, resolve) {
if (!node.data) {
const res = await this.getOrg(null);
if (res && Array.isArray(res)) {
res.forEach(item => {
if (item.has_child && item.parent.id === 0) {
this.defaultExpandedCids.push(item.org_id);
}
this.defaultSelectCids.push(item.org_id);
});
}
resolve(res);
} else {
resolve(await this.getOrg(node.data.org_id));
}
}
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate, this.$refs.orgTreeData.getCheckedKeys());
}
async getOrg(orgId) {
this.orgTreeLoading = true;
const {
data: { tree_data = {} },
error,
} = await http.API();
if (!error) {
this.orgTreeLoading = false;
return new Promise(resolve => {
resolve(tree_data);
});
}
}效果圖如下

到此這篇關(guān)于Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果的文章就介紹到這了,更多相關(guān)Element el-tree懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- ElementUI中el-tree如何獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài)
- el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù)
- vue中el-tree動(dòng)態(tài)初始默認(rèn)選中和全選實(shí)現(xiàn)方法
- 餓了么UI中el-tree樹節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性)
- el-tree設(shè)置選中高亮/焦點(diǎn)高亮、選中節(jié)點(diǎn)加深背景及更改字體顏色等的方法
- vue2+elementUI的el-tree的選中、高亮、定位功能的實(shí)現(xiàn)
- 解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑
- el-tree限制選中個(gè)數(shù)的實(shí)例
相關(guān)文章
elementUI?el-radio?無(wú)法點(diǎn)擊的問題解決
本文主要介紹了elementUI?el-radio?無(wú)法點(diǎn)擊的問題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue監(jiān)聽input標(biāo)簽的value值方法
今天小編就為大家分享一篇vue監(jiān)聽input標(biāo)簽的value值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊
這篇文章主要介紹了Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
vue.js動(dòng)態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了vue.js動(dòng)態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
詳解使用vue-router進(jìn)行頁(yè)面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽事件
本篇文章主要介紹了詳解使用vue-router進(jìn)行頁(yè)面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽事件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03
vue3+vite+vant4手機(jī)端項(xiàng)目實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于vue3+vite+vant4手機(jī)端項(xiàng)目實(shí)戰(zhàn)的相關(guān)資料,Vue3是一種前端開發(fā)框架,它的目標(biāo)是提供更好的性能和開發(fā)體驗(yàn),需要的朋友可以參考下2023-08-08

