el-select因为绑定的值为整数而无法默认选择

220 字

1 分钟

el-select因为绑定的值为整数而无法默认选择

2025-04-10

Vue

前言#

今天在数据字典这块遇到一个问题，就是el-select绑定的值为整数而无法默认选择的问题，它会直接显示数字，而不是选择列表中的某个选项，这个问题仅仅在我们绑定的值是Int类型的时候，才会出现

代码如下所示

1
        <el-form-item label="菜单等级" :label-width="formLabelWidth" required>
2
          <el-select v-model="form.menuLevel" size="small" placeholder="请选择">
3
            <el-option
4
              v-for="item in menuLevelDictList"
5
              :key="item.uid"
6
              :label="item.dictLabel"
7
              :value="(item.dictValue)"
8
            ></el-option>
9
          </el-select>
10
        </el-form-item>

这是因为 v-model 绑定的 form.menuLevel没有自动将Integer类型转为String类型，其实解决思路也比较清晰，就是在部分，将原来的string类型，通过 parseInt() 方法转换为int类型即可，代码如下所示：

1
        <el-form-item label="菜单等级" :label-width="formLabelWidth" required>
2
          <el-select v-model="form.menuLevel" size="small" placeholder="请选择">
3
            <el-option
4
              v-for="item in menuLevelDictList"
5
              :key="item.uid"
6
              :label="item.dictLabel"
7
              :value="parseInt(item.dictValue)"
8
            ></el-option>
9
          </el-select>
10
        </el-form-item>

我们看最后的效果图，发现能够正常显示了：

el-select因为绑定的值为整数而无法默认选择

http://localhost:4321/posts/vue/el-select因为绑定的值为整数而无法默认选择/

发布于

2025-04-10

许可协议

CC BY-NC-SA 4.0

1

前言