1.左右布局 点击左边的树(一个) 切换右边的树(一个),出来不同的数据
image.png
思路:
1.在左边树的change事件中调用 右边懒加载的tree
2.调用之前必须清空子节点
3.第一次调用之前必须先存一下node 和reoslve
直接上代码,html的结构
<div class="dialogLift">
<el-tree
:data="data"
:props="defaultPropsGroup"
highlight-current
node-key="orgCode"
default-expand-all
@node-click="handleNodeClick"
:default-expanded-keys="defaultShowNodes"
:default-checked-keys="[3]"
></el-tree>
</div>
<div class="dialogRight">
<el-checkbox class="checkAll">全选</el-checkbox>
<!--机构部门-->
<el-tree
v-model="dialogForm.orgNodes"
accordion
class="org_div"
@check-change="handleCheckChange"
:props="props"
:load="loadNode"
:lazy="lazy"
show-checkbox
node-key="orgCode"
ref="tree">
</el-tree>
</div>
data里面定义的
props: {
label: 'orgName',
children: 'children'
},
//组织架构
defaultPropsGroup:{
children: 'children',
label: 'orgName'
},
data:[],
active:'',
resolve:[],//加载数据的方法里把node,reslove存起来
node:[],
methods方法中
//默认加载组织架构tree
getDeptList(){
contentMngAddEditApi.deptTree().then(res=>{
if(res.status===0){
this.data=[{
id: 0,
orgName: '组织架构',
children: res.data.map(item=>{
return item
})
}]
}else{
this.$message.error(res.message)
}
}) .catch((error) => {
console.log('/announce/dept/auth/tree默认加载组织架构tree', error)
});
},
//组织架构节点被点击时的回调
handleNodeClick(data) {
this.node.childNodes = []; // 把子节点清空,否则下次加载时会直接往里push子节点导致重复
this.loadNode(this.node,this.resolve,data); //手动调用加载数据方法
this.active=data.id
},
// 加载树型组织部门信息
loadNode(node, resolve,data) {
let params = {};
if(data&&data.id===0){
return
}
if(data===undefined&&node.data===undefined){
// params={//默认是集团
// deptType:1,
// orgCode:"FIRST"
// }
params={//默认常用群组
deptType:2,
orgCode:"1"
}
}else if(data===undefined){
params={
deptType:node.data.deptType,
orgCode:node.data.orgCode
}
}else{
params={//点击传参数
deptType:data.deptType,
orgCode:data.orgCode
}
}
contentMngAddEditApi.organizationsTree(params).then(res => {
if (res.status == 0) {
if (node.level === 0) {//必须判断一下,否则Tree树形控件节点一旦展开,就不再重新加载节点数据
this.node=node;
this.resolve=resolve;
this.node.childNodes = []; // 把子节点清空,否则下次加载时会直接往里push子节点导致重复
}
return resolve(res.data)
} else {
return this.$message.error(res.message)
}
})
},
网友评论