饿了么的级联选择有时候需要通过后台动态返回选择器的项,调用props里面的懒加载函数
通过懒加载动态加载级联的选项,比如省/市/区,
但是在回显的时候需要对已经选好的数据回显会有麻烦,比如回显第一条(湖北/武汉)成功,回显第二条(广东广州)时,区的条目没有重新加载,
<el-cascader v-if="showca" :props="props" v-model="dataModel" ref='cascader'></el-cascader>
这里通过v-if=showca控制el的生存状态,
that.showca=false
that.addRuleForm.roomData = roomArr;
setTimeout(() => {
that.showca=true
}, 10);
先将showca置为false然后置为true 就会重新调用lazyload重载函数 ,
selectLazyLoad:function(node,resolve){//楼栋懒加载
var that = this
const { level } = node;
console.log(node)
if(node.level == 0){//加载楼栋
that.loadProvince().then(res=>{//比如这是加载省份
const nodes = res.data.data
.map(item => ({
value: item.id,
label: item.name,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}).catch(rej=>{
})
}
if(node.level == 1){
var id=''
if(that.diaFlag){//这里是判断是不是回显模式 如果是回显模式需要下面的参数
id = node.data.value
}
else{
id = that.addRuleForm.roomData[0]//回显用的省份参数
}
that.loadingCity(id).then(res=>{//比如这是加载城市id是回显用的也可能是正常选择的
const nodes = res.data.data
.map(item => ({
value: item.id,
label: item.name,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}).catch(rej=>{
})
}
if(node.level == 2){
var id=''
if(that.diaFlag){//同样 判断是否回显模式
id = node.data.value
}
else{//编辑模式
id = that.addRuleForm.roomData[1]
}
that.loadingArea(id).then(res=>{//比如这里是加载地区 用之前节点选好的城市id来加载地区
const nodes = res.data.data
.map(item => ({
value: item.room,
label: item.room,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
setTimeout(() => {
that.diaFlag = true
}, 500);
//在回显模式完成后一定要取消回显模式的flag,因为可能会重新选择级联选项 重新加载子节点
}).catch(rej=>{
setTimeout(() => {
that.diaFlag = true
}, 500);
})
}
},
在Data里
props: {
lazy: true,
lazyLoad (node, resolve) {
that.selectLazyLoad(node,resolve)
//这是上面写在methods里面的懒加载函数
}
}
这样子就能对cascader级联选择器进行回显的重载了,先将级联选择器的flag置为false在置为true