今天做項目的時候遇到了一個很棘手的問題垢粮，elementui的select下拉框也用了好多次了，今天當(dāng)用對象綁定數(shù)據(jù)的時候回顯就有問題了缸濒，會顯得是個數(shù)字足丢，百思不得其解粱腻，然后就翻箱倒柜庇配，找到了以前做的項目，以前的代碼是這樣寫的:
<el-select v-model="ruleForm.region" placeholder="請選擇活動區(qū)域">
<el-option
v-for="(item, index) in typeArr"
:label="item.label"
:key="index"
:value="item.value"
></el-option>
</el-select>
//js
typeArr: [
{
label: "區(qū)域一",
value: 1,
},
{
label: "區(qū)域二",
value: 2,
},
{
label: "區(qū)域三",
value: 3,
},
],
ruleForm: {
region: 1,
},
今天寫的時候我是把數(shù)據(jù)保存在一個對象里面的绍些，如下所示:
<el-select
value-key="value"
v-model="ruleForm.region"
placeholder="請選擇活動區(qū)域"
>
<el-option
v-for="(value, key) in typeObj"
:label="value"
:key="key"
:value="key"
></el-option>
</el-select>
//js
typeObj: {
1: "區(qū)域一",
2: "區(qū)域二",
3: "區(qū)域三",
},
這樣寫是我覺得這里用對象結(jié)構(gòu)會更簡單一些捞慌，但是問題就出現(xiàn)了，當(dāng)用數(shù)組的時候會顯示文字柬批，但是用對象的這個回顯的是個數(shù)字啸澡，如下所示:
select回顯問題.png
按理來說兩個應(yīng)該顯示一樣才對，為了不耽誤項目進(jìn)度氮帐，我采用了數(shù)組的形式嗅虏，但是我怎么能就此止步了，經(jīng)過我的探索上沐，我發(fā)現(xiàn)是因為對象的key都是字符串皮服，而我上面綁定的
ruleForm: { region: 1 }region是個數(shù)字，當(dāng)我把region換成字符串以后，綁定對象時回顯也就沒問題了龄广，機(jī)智如我硫眯，今天的分享就到這里啦，希望我的分享對你有幫助择同，讓你少踩點坑
