2019-03-13 element-ui select下拉框默认值的问题(赋值出来是id而不是汉字)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2019-03-13 element-ui select下拉框默认值的问题(赋值出来是id而不是汉字)相关的知识,希望对你有一定的参考价值。
参考技术A 关于element select框默认值赋值不成功问题,注意两点:1、v-model里面的数据和遍历出来value值数据类型不一样。(例:item.provinces类型是number,province类型是String。类型不一样导致赋值不成功)
2、遍历数据和赋值的先后顺序,必须保证数据先遍历后赋值。
注意注意注意:要为select设定默认值,只要把v-model绑定的值和你想要选中option的value值设置一样即可。
<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>
<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>
<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>
重要的事情说三遍data定义必须与后台一致的数据类型,比如后台返回来的是数字,就必须定义数字类型的
pid:0,//必须制定Number(与后台返回来的数据类型一致)
cid:0,//必须制定Number(与后台返回来的数据类型一致)
aid:0,//必须制定Number(与后台返回来的数据类型一致)
赋值的时候也必须是数字类型的
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=
//省市区
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,
;
)
,
以上是关于2019-03-13 element-ui select下拉框默认值的问题(赋值出来是id而不是汉字)的主要内容,如果未能解决你的问题,请参考以下文章
vue中的element-ui和react的element-ui