vue select 下拉框设置不显示 value，显示 value 对应的 label 值

原创 于 2019-08-23 19:21:19 发布 · 6.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍在Vue项目中使用Element UI的Select组件时，遇到的后台数据类型不匹配问题及解决方案。当从后台获取的数据类型与Select组件的value值类型不符时，会导致选项无法正确显示。文章详细说明了如何在获取数据后进行类型转换，确保组件正常工作。

从后台获取的数据填充之后，出现问题：
在这里插入图片描述
具体实现代码如下：

<el-form-item label="部门类型：">
          <el-select v-model="oneDepart.deptType" placeholder="请选择部门类型" class="diaRightLab">
            <el-option v-for="(item,index) in deptOptions" :key="index" 
              :value="item.value" :label="item.label">
            </el-option>
          </el-select>
</el-form-item>
data() {
    return {
      deptOptions: [
        {
          value: 0,
          label: '供电局部门'
        },
        {
          value: 1,
          label: '外来班组'
        }
      ]
}

经过查找发现了原因：value 的格式存在问题，数据库读取到的数据不一定为number类型。

解决方法：后台获取到数据之后，进行格式转换。如下所示：

this.oneDepart.deptType = Number(this.oneDepart.deptType)

页面效果：
在这里插入图片描述