Element樹形控件el-tree懶加載并設(shè)置默認展開和選中的效果
使用elementui樹組件,通過懶加載加載數(shù)據(jù),并設(shè)置默認展開和全部選中的效果。
<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é)點
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è)置默認展開和選中的效果的文章就介紹到這了,更多相關(guān)Element el-tree懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- ElementUI中el-tree如何獲取每個節(jié)點點擊的選中狀態(tài)
- el-tree使用獲取當(dāng)前選中節(jié)點的父節(jié)點數(shù)據(jù)
- vue中el-tree動態(tài)初始默認選中和全選實現(xiàn)方法
- 餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)
- el-tree設(shè)置選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的方法
- vue2+elementUI的el-tree的選中、高亮、定位功能的實現(xiàn)
- 解決el-tree數(shù)據(jù)回顯時子節(jié)點部分選中父節(jié)點都全選中的坑
- el-tree限制選中個數(shù)的實例
相關(guān)文章
在Vue中使用Viser說明(基于AntV-G2可視化引擎)
這篇文章主要介紹了在Vue中使用Viser說明(基于AntV-G2可視化引擎),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue.js click點擊事件獲取當(dāng)前元素對象的操作
這篇文章主要介紹了vue.js click點擊事件獲取當(dāng)前元素對象的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Element-ui Drawer抽屜按需引入基礎(chǔ)使用
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
如何使用 Vue Router 的 meta 屬性實現(xiàn)多種功能
在Vue.js中,Vue Router 提供了強大的路由管理功能,通過meta屬性,我們可以在路由定義中添加自定義元數(shù)據(jù),以實現(xiàn)訪問控制、頁面標題設(shè)置、角色權(quán)限管理、頁面過渡效果,本文將總結(jié)如何使用 meta 屬性來實現(xiàn)這些常見的功能,感興趣的朋友一起看看吧2024-06-06

