以下仅展示部分关键代码
<el-cascader
:props="branchProps"
v-model="form.org"
ref="org"
@change="orgChange"
@visible-change="handleVisibleChange"
@clear="orgChange"
placeholder="请选择"
clearable
filterable
:show-all-levels="false"
collapse-tags
></el-cascader>
computed: {
branchProps(){
return{
lazy: true,
checkStrictly: true,
multiple:true,//多选true,单选false
emitPath:false,
lazyLoad:this.loadTreeNode,
}
}
},
async loadTreeNode(node, resolve) {
const { level } = node;
let branch=level==0?'':node.data.value
let orgList=[]
orgList=JSON.parse(JSON.stringify(this.form.org))
if(node.hasChildren || node.root){
if(JSON.stringify(this.optionsChild)!="{}"&&this.optionsChild.hasOwnProperty(branch)){
//子节点点加载过的,不在加载
this.$nextTick(()=>{
this.form.org=this.originCheckedList
})
resolve([]);
}else{
await this.getChildBranch(branch).then((res) => {
if(node.root){
this.options=res
}else{
this.optionsChild[branch]=res
}
this.originCheckedList=JSON.parse(JSON.stringify(this.form.org))
resolve(res);
});
}
}else{
resolve([])
}
//多选才需要下面的判断。。。多选的关键代码!!!!!!!!!
if(orgList){
// 重新回显已选列表,必须在下一次渲染后执行,否则数据的更新会在渲染前,导致级联器无法成功监听数据变动。
this.$nextTick(() => {
// 一定要将级联器数据置空,否则可能不会触发重载。
this.form.org = [];
this.form.org = orgList;
//对展开的节点有限制也可写在此处
});
}
},
getChildBranch(code=''){
let params=code
let _this=this
return new Promise(async (resolve, reject) => {
await getBranchNew(params).then((res) => {
let option = res.map((item) => {
let leaf=false
let disabled=false
if(判断是否是叶子结点){
//叶子结点
leaf=true
}
if(判断选中框是否能选中){
disabled=true
}
return {
label: item.name,
value: item.code,
leaf: leaf,
disabled:disabled
};
});
resolve(option);
})
.catch((err) => console.log(err));
})
},
orgChange(val,selectedOptions){
//单选时,要加该配置,多选不用,单选的关键代码!!!!!!!!
// 选中时加载子节点
const panelRefs = this.$refs.org.$refs.panel // 节点刷新,页面回显
if((!panelRefs.getCheckedNodes()[0].children || !panelRefs.getCheckedNodes()[0].children.length)) {
panelRefs.lazyLoad(panelRefs.getCheckedNodes()[0])
}
}
},