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;
}
}
}
});
},
上一篇: 获取mysql 所有数据类型列表
下一篇: httarck工具使用指南