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)
  }
},

结果:

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

  • 8
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论
Cascader 级联选择器懒加载,一般是通过在 `load` 事件中异步加载子选项实现的。当用户选择某一级选项,会触发 `load` 事件,此可以根据当前选中的选项,请求后台数据获取下一级选项列表,然后更新 Cascader 的选项列表。 在懒加载,如果需要回显已选中的选项,可以通过 `lazy` 属性配合 `value` 属性实现。`lazy` 属性表示是否启用懒加载模式,`value` 属性表示级联选择器的选中值,是一个数组。 以下是一个简单的示例: ```html <el-cascader v-model="selectedOptions" :options="options" :lazy="true" :value="selectedOptions" @load="handleLoad" ></el-cascader> ``` 在这个示例中,`selectedOptions` 是一个数组,用于绑定级联选择器的值。`options` 是一个数组,表示级联选择器的选项列表。`lazy` 属性设置为 `true`,表示启用懒加载模式。`value` 属性设置为 `selectedOptions`,表示级联选择器的选中值与 `selectedOptions` 绑定。 当用户选择某一级选项,会触发 `load` 事件,此会调用 `handleLoad` 方法,该方法需要异步请求后台数据,获取下一级选项列表,然后更新级联选择器的选项列表。在加载完成后,需要将 `selectedOptions` 设置为对应的数组,以便回显已选中的选项。以下是一个简单的 `handleLoad` 方法示例: ```js methods: { async handleLoad(selectedOptions) { const res = await axios.get('/api/cascader', { params: { selectedOptions: selectedOptions } }) const options = res.data // 更新级联选择器的选项列表 this.$set(selectedOptions[selectedOptions.length - 1], 'children', options) // 回显已选中的选项 this.selectedOptions = [...selectedOptions] } } ``` 在这个示例中,`handleLoad` 方法异步请求后台数据,获取下一级选项列表,然后使用 `$set` 方法更新级联选择器的选项列表,最后将 `selectedOptions` 设置为对应的数组,以便回显已选中的选项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昌子玩前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值