vue使用elementUI中的select选择器字符类型与数字
2021-09-09 本文已影响0人
兰觅
一.简述
在数据库中存储数据为数字,而前端显示界面需要进行字符串类型展示
如在编辑页面需要回显数据,该如何进行转换呢?
1.在select中如下:
<el-form-item label="性别">
<el-select v-model="userForm.sex" placeholder="请选择性别">
<el-option v-for="(item,key) in sexs" :key="key" :label="item.label" :value="key"></el-option>
</el-select>
</el-form-item>
2.定义如下数据类型
data() {
return {
//多条件查询是否性别下拉框
sexs: [{
value: '0',
label: '男'
}, {
value: '1',
label: '女'
}],
}
}
3.如果:option 中的label如下:
:label="item"
显示数据为:
数据类型显示
4.显然这不是我们需要看到的数据,修改为
:label="item.label"
效果显示正确
效果2