Element树形控件el-tree懒加载并设置默认展开和选中的效果
北鸟南游 人气:0使用elementui树组件,通过懒加载加载数据,并设置默认展开和全部选中的效果。
<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>
主要设置load替换data属性。
还设置属性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节点 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); }); } }
效果图如下
加载全部内容