今天做项目的时候遇到了一个很棘手的问题，elementui的select下拉框也用了好多次了，今天当用对象绑定数据的时候回显就有问题了，会显得是个数字，百思不得其解，然后就翻箱倒柜，找到了以前做的项目，以前的代码是这样写的:
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option
v-for="(item, index) in typeArr"
:label="item.label"
:key="index"
:value="item.value"
></el-option>
</el-select>
//js
typeArr: [
{
label: "区域一",
value: 1,
},
{
label: "区域二",
value: 2,
},
{
label: "区域三",
value: 3,
},
],
ruleForm: {
region: 1,
},
今天写的时候我是把数据保存在一个对象里面的，如下所示:
<el-select
value-key="value"
v-model="ruleForm.region"
placeholder="请选择活动区域"
>
<el-option
v-for="(value, key) in typeObj"
:label="value"
:key="key"
:value="key"
></el-option>
</el-select>
//js
typeObj: {
1: "区域一",
2: "区域二",
3: "区域三",
},
这样写是我觉得这里用对象结构会更简单一些，但是问题就出现了，当用数组的时候会显示文字，但是用对象的这个回显的是个数字，如下所示:
select回显问题.png
按理来说两个应该显示一样才对，为了不耽误项目进度，我采用了数组的形式，但是我怎么能就此止步了，经过我的探索，我发现是因为对象的key都是字符串，而我上面绑定的
ruleForm: { region: 1 }region是个数字，当我把region换成字符串以后，绑定对象时回显也就没问题了，机智如我，今天的分享就到这里啦，希望我的分享对你有帮助，让你少踩点坑
