vue中element组织机构树形组件(页面加载就渲染)
template:
<el-tree :data="TreeMenu"
:current-node-key="currentLivingId"
:props="{
label: 'orgName',
children: 'children'
}"
ref="popularTree" lazy
:load="loadTreeMenuNode"
node-key="id"
@node-click="handleNodeClick"
highlight-current ></el-tree>
data:
TreeMenu: [],// 机构数据
currentLivingId: "",//默认的选中菜单值
methods:(通过父级id获取子级)
cscpOrgsAll() { // 获取动态机构树菜单
return new Promise((resolve) => {
this.$api.cscpOrgsAll(this.queryCscpOrgsAll).then((res) => {//调接口渲染树形菜单数据
let data = res.data || {};
let cscpOrgDTOs = data.cscpOrgDTOs || [];
resolve(cscpOrgDTOs);
})
})
},
loadTreeMenuNode(node, resolve) { // 懒加载子级数据
if (node && node.key) {
this.queryCscpOrgsAll.parentId = node.key;
this.cscpOrgsAll().then((data) => {
resolve(data);
})
}
},
handleNodeClick(node) { // 选择某个node节点
this.orgId = node.id;//选择的id
this.ApprovalList();//调接口(要渲染的对应的id数据)
},