vue使用elementUI中的select选择器字符类型与数字类型转换

一.简述
在数据库中存储数据为数字,而前端显示界面需要进行字符串类型展示
如在编辑页面需要回显数据,该如何进行转换呢?

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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容