美文网首页
vue使用elementUI中的select选择器字符类型与数字

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

作者: 兰觅 | 来源:发表于2021-09-09 16:03 被阅读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

    相关文章

      网友评论

          本文标题:vue使用elementUI中的select选择器字符类型与数字

          本文链接:https://www.haomeiwen.com/subject/scjbiltx.html