解决el-select数据类型相同但是显示数字的问题
这个不是我写的,只是遇到的bug,写法问题,忽略了值的绑定的问题
源代码bug:
<el-selectv-model="schemeInfo.horizon"placeholder="请选择起报月份"clearablefilterable><el-option v-for="(option,index) in horizonOptions" :key="index" :value="option.value">{{ option.label }}</el-option></el-select>
定义的数据:
这里的原来的string被我改成了Number,因为需要全等,不然就是显示里面的值,而不是label
horizonOptions: [{ value: 0, label: '当年' },{ value: 1, label: '次年' }]
设置的默认值:
这里的 horizon: 0需要与上面的value为统一数据类型,也是数字
schemeInfo: {schemeName: '',statCode: '',target: '',initMonth: '',horizon: 0},
看以上感觉都是对的哈,数据类型也是对的全等,但是就是显示不了中文
但是显示为:
问题原因所在:
在
el-option
中,只绑定了:value
属性,但没有绑定:label
属性当选中选项时,
el-select
默认会显示value
而不是label
关键修改点:
在
el-option
上添加了:label="option.label"
属性简化了
el-option
的内容,不需要在标签内再写{{ option.label }}
确保
v-model
绑定的schemeInfo.horizon
与option.value
类型一致(都是数字)
改后代码:
<el-selectv-model="schemeInfo.horizon"placeholder="请选择起报月份"clearablefilterable><el-optionv-for="(option, index) in horizonOptions":key="index":label="option.label":value="option.value"/></el-select>