问题回顾:编辑页面有个城市联动器,懒加载形式获取数据。再编辑初始化时,城市默认值不见了
选中时:
编辑初始化时:
查阅相关文档及百度 没有发现好的借鉴方案,领导在催着要,功夫不负有心人查阅到一篇相关问题的文章,思路描述很棒:https://zhuanlan.zhihu.com/p/269162598?utm_source=wechat_session
1、初始化备选项的一级下拉选。
2、遍历一级下拉选判断是否需要加载子类目。
3、递归遍历下拉选。
4、获取到的子集赋值给children
5、leaf 指定选项的叶子节点的标志位为选项对象的某个属性值,这个值一定要设置不然会出现不显示的情况
核心思想:把需要的省、市、区数据都加载出来给options使用,市、区数据只要加载你默认的市、区节点即可
html:
<el-cascader
ref="addressCascader"
v-model="address"
:options="addressOptions"
show-all-levels
clearable
placeholder="请选择省市区"
:props="addressProps"
@change="addressChange">
</el-cascader>
//address默认值格式:[110000, 110100, 110101]
js:
addressOptions: [],
addressProps: {
value: 'id',
label: 'name',
lazy: true,
lazyLoad (node, resolve) {
let level = node.level
if (level >= 1) {
setTimeout(() => {
getSubCity(node.data.id).then((res) => {//获取市、区
if (res.code === 0) {
res.data.forEach(item => item.leaf = level>= 2)
resolve(res.data);
}
})
}, 500);
}else{
// _this.getProvince()
}
}
},
mounted() {
this.getProvince()
},
async loadOptions(list) {//递归加载子类目
let _this = this
_this.level=_this.level+1
let array = [];
for(let item of list){
if ( item.type > 0 && _this.ruleForm.cityIds.includes(item.id) ) {
let res = await getSubCity(item.id);//根据id获取市、区数据
if (res.code === 0 && res.data) {
list.forEach(item2 => item2.leaf = (_this.level>=_this.ruleForm.cityIds.length))//此leaf决定是否显示
item.children = await _this.loadOptions(res.data)//element有规则children为指定选项的子选项为选项对象的某个属性值
}
}
array.push(item);
}
return array;
},
async getProvince() {//获取1级省列表
let _this = this
let res = await getProvince();
if (res.code === 0) {
// this.addressOptions = await this.loadOptions(res.data || []);
_this.$set(_this, 'addressOptions',_this.ruleForm.cityIds&&_this.ruleForm.cityIds.length>0?await this.loadOptions(res.data||[] ):res.data)
}
},
结果:
注意:本项目中 获取省份跟市区是分开两个接口