背景：
记录el-cascader多选+懒加载+数据回显的实际案例。
注意：
1.回显数据的时候除了给v-model绑定的属性赋值以外，还要提供一个包含需要渲染的级联数据的options模板。
2.resolve(nodes) 返回的nodes为下一级要渲染的list列表数据，如果是回显已提供了options渲染模板但是不完整，则需要在后面懒加载的时候将返回的list数据和已存在的节点数据做对比，仅保留options中不存在的节点数据再把过滤后的节点resolve(nodes)。
<template>
<div>
<!--template模板中引用-->
<el-cascader style="width: 100%" :props="cascaderProps" :options="formData.options" v-model="formData.vpc_info" @change="cascaderChange" v-if="cascaderVisible">
</div>
</template>
<script>
export default {
data() {
formData: {
//回显数据的模板
options: [{
"children": [{
"children": [{
"label": "infra-test-01",
"value": "infra-test-01"
}],
"label": "usne",
"value": "usne"
}],
"label": "AZURE-CLOUD",
"value": "3"
}],
//需要回显的三级数据
vpc_info: [
['3', 'usne', 'infra-test-01']
],
},
cascaderVisible: true,
cascaderProps: {
lazy: true,
multiple: true,
lazyLoad: (node, resolve) => {
const {
level
} = node;
console.log('lazyLoadnode', node)
if(level === 2) { //点击城市level=2加载vpc列表
this.getCloudInfo(node, resolve, node.parent.value, node.value)
} else if(level === 1) { //点击云服务level=1加载城市列表
this.getCloudInfo(node, resolve, node.value)
} else { //初始化level=0加载云服务列表
this.getCloudInfo(node, resolve)
}
}
},
},
watch: {
// 监听环境变化
'formData.cd_work_env': {
handler(cd_work_env, value) {
console.log('cd_work_env改变---', cd_work_env)
if(cd_work_env && cd_work_env !== value) {
//切换环境重置云服务列表 通过v-if触发三级联动自动加载
this.formData.vpc_info = []
this.cascaderVisible = false
this.$nextTick(() => {
this.cascaderVisible = true
})
}
}
},
},
methods: {
// 懒加载获取三级联动数据
getCloudInfo(node, resolve, cloudId = '', areaId = '') {
if(!this.formData.cd_work_env) {
return false;
}
_fetch({
url: '/deploy-resource-management/mixCloud/getCloudInfoBySytemId',
type: 'post',
data: {
system_id: this.formData.cd_work_system,
env: this.formData.cd_work_env,
cloud_type: cloudId,
area: areaId,
}
}).then(res => {
if(res.data.code === 200) {
//将当前节点已有的子节点和重新请求的node节点对比，如已存在则移除该节点再resolve
if(res.data.body.type && res.data.body.type.length) {
let nodes = res.data.body.type.map(item => {
return { ...item,
leaf: node.level >= 2
}
})
if(node.hasChildren && node.children.length) {
let list = []
node.children.forEach(item => {
let flag = true
nodes.forEach(subItem => {
if(item.value === subItem.value) {
flag = false
}
})
if(flag) {
list.push(subItem)
}
})
resolve(list);
} else {
resolve(nodes);
}
} else {
resolve([]);
}
} else {
_message(this.$t("localization.common.error"), res.data.message, "error", this)
}
}).catch(err => {
console.log(err)
});
},
cascaderChange(value) {
console.log(value)
},
}
}
</script>
