關(guān)于element select框默認(rèn)值賦值不成功問題逗抑,注意兩點:
1、v-model里面的數(shù)據(jù)和遍歷出來value值數(shù)據(jù)類型不一樣嘀略。(例:item.provinces類型是number蜈缤,province類型是String。類型不一樣導(dǎo)致賦值不成功)
2势就、遍歷數(shù)據(jù)和賦值的先后順序,必須保證數(shù)據(jù)先遍歷后賦值脉漏。
注意注意注意:要為select設(shè)定默認(rèn)值苞冯,只要把v-model綁定的值和你想要選中option的value值設(shè)置一樣即可。
<el-form-item label="省:">
<el-select @change="getCid(editForm.pid)" v-model="editForm.pid" clearable placeholder="請選擇省">
<el-option
:key="0"
label="請選擇"
:value="0">
</el-option>
<el-option
v-for="item in optionsPid"
:key="item.regionId"
:label="item.regionName"
:value="item.regionId">
</el-option>
</el-select>
</el-form-item>
<el-select @change="getAid(editForm.cid)" v-model="editForm.cid" clearable placeholder="請選擇市">
<el-option
:key="0"
label="請選擇"
:value="0">
</el-option>
<el-option
v-for="item in optionsCid"
:key="item.regionId"
:label="item.regionName"
:value="item.regionId">
</el-option>
<el-select v-model="editForm.aid" value-key="editForm.aName" clearable placeholder="請選擇區(qū)">
<el-option
:key="0"
label="請選擇"
:value="0">
</el-option>
<el-option
v-for="item in optionsAid"
:key="item.regionId"
:label="item.regionName"
:value="item.regionId">
</el-option>
</el-select>
</el-select>
<el-form-item label="省:">
<el-select @change="getCid(editForm.pid)" v-model="editForm.pid" clearable placeholder="請選擇省">
<el-option
:key="0"
label="請選擇"
:value="0">
</el-option>
<el-option
v-for="item in optionsPid"
:key="item.regionId"
:label="item.regionName"
:value="item.regionId">
</el-option>
</el-select>
</el-form-item>
<el-select @change="getAid(editForm.cid)" v-model="editForm.cid" clearable placeholder="請選擇市">
<el-option
:key="0"
label="請選擇"
:value="0">
</el-option>
<el-option
v-for="item in optionsCid"
:key="item.regionId"
:label="item.regionName"
:value="item.regionId">
</el-option>
<el-select v-model="editForm.aid" value-key="editForm.aName" clearable placeholder="請選擇區(qū)">
<el-option
:key="0"
label="請選擇"
:value="0">
</el-option>
<el-option
v-for="item in optionsAid"
:key="item.regionId"
:label="item.regionName"
:value="item.regionId">
</el-option>
</el-select>
</el-select>
<el-form-item label="省:">
<el-select @change="getCid(editForm.pid)" v-model="editForm.pid" clearable placeholder="請選擇省">
<el-option
:key="0"
label="請選擇"
:value="0">
</el-option>
<el-option
v-for="item in optionsPid"
:key="item.regionId"
:label="item.regionName"
:value="item.regionId">
</el-option>
</el-select>
</el-form-item>
<el-select @change="getAid(editForm.cid)" v-model="editForm.cid" clearable placeholder="請選擇市">
<el-option
:key="0"
label="請選擇"
:value="0">
</el-option>
<el-option
v-for="item in optionsCid"
:key="item.regionId"
:label="item.regionName"
:value="item.regionId">
</el-option>
<el-select v-model="editForm.aid" value-key="editForm.aName" clearable placeholder="請選擇區(qū)">
<el-option
:key="0"
label="請選擇"
:value="0">
</el-option>
<el-option
v-for="item in optionsAid"
:key="item.regionId"
:label="item.regionName"
:value="item.regionId">
</el-option>
</el-select>
</el-select>
重要的事情說三遍data定義必須與后臺一致的數(shù)據(jù)類型侧巨,比如后臺返回來的是數(shù)字抱完,就必須定義數(shù)字類型的
pid:0,//必須制定Number(與后臺返回來的數(shù)據(jù)類型一致)
cid:0,//必須制定Number(與后臺返回來的數(shù)據(jù)類型一致)
aid:0,//必須制定Number(與后臺返回來的數(shù)據(jù)類型一致)
賦值的時候也必須是數(shù)字類型的
VillageInfo(id){
if(id){
api.getVillageInfo(id).then(res => {
if(res.status==200){
this.getCid(res.data.pid)
this.getAid(res.data.cid)
this.pName=res.data.pName;
this.cName=res.data.cName;
this.aName=res.data.aName;
this.pid=res.data.pid;
this.editForm={
//省市區(qū)
pid:Number(res.data.pid),
cid:Number(res.data.cid),
aid:Number(res.data.aid),
villageId:res.data.villageId,
villageName:res.data.villageName,
villageCoding:res.data.villageCoding,
useArea:res.data.useArea,
netArea:res.data.netArea,
buildingNo:res.data.buildingNo==0?"":res.data.buildingNo,
buildingArea:res.data.buildingArea,
notArea:res.data.notArea,
lockingArea:res.data.lockingArea,
menuId:res.data.menuId,
status:res.data.status,
isBenefit:res.data.isBenefit,
//付款場景
// fromType:this.$refs.formTypeChild.tempValue,
address:res.data.address,
companyId:res.data.companyId,
};
}
})
}
},