Element树形控件el-tree懒加载并设置默认展开和选中的效果
短信预约 -IT技能 免费直播动态提醒
使用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);
});
}
}
效果图如下
到此这篇关于Element树形控件el-tree懒加载并设置默认展开和选中的效果的文章就介绍到这了,更多相关Element el-tree懒加载内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341