elementUi Cascader 级联选择器(省市区) 动态加载(懒加载)编辑时回显(默认值回显)问题

问题回顾:编辑页面有个城市联动器,懒加载形式获取数据。再编辑初始化时,城市默认值不见了

选中时:

编辑初始化时:

查阅相关文档及百度 没有发现好的借鉴方案,领导在催着要,功夫不负有心人查阅到一篇相关问题的文章,思路描述很棒: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)
  }
},

结果:

注意:本项目中 获取省份跟市区是分开两个接口

posted @ 2021-03-05 14:22  昌子玩前端  阅读(934)  评论(0)    收藏  举报  来源