欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

element-UI级联选择器--数据回显

程序员文章站 2022-06-07 18:36:48
...

修改的时候进行级联选择器的数据回显

1、与新增一致,将该绑定的数据双向绑定到级联选择器上

  <el-form-item label="车籍所在地:" class="width-12" prop="registerZoneArr" key="registerZoneArr">
            <el-cascader
                v-model="licenseInfo.registerZoneArr"
                :options="optionsZoneList"
                @active-item-change="handleChangeZone"
                clearable
                :props="vehicleProps"
            ></el-cascader>
     </el-form-item>

2、拿到数据回显

  let arr=[val.upRegisterZoneId,val.registerZoneId];
  this.licenseInfo["registerZoneArr"]=arr;      
  this.handleChangeZone(this.licenseInfo.registerZoneArr) //用第一级的值去请求第二级选项

   handleChangeZone(val) {//由于该级联选择器只有两级,就用了比较简单的方法
       let value=val[0]
       let data = {
         zoneId: value
       };
       getZoneListApi(data).then(res => {
         if (res.code==200) {
             var city=res.data;
             for(let i=0;i<this.optionsZoneList.length;i++){
                 if(this.optionsZoneList[i].zoneId==value){
                     this.$set(this.optionsZoneList[i],'vehicleCities',city);
                     console.log(this.optionsZoneList[i])
                     break;
                 }
             }
         }
       });
     },
相关标签: 实操