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

文章讲述了在Vue.js开发中遇到的一个问题,即当el-select组件的v-model绑定的值为整数时,无法正确显示默认选择的选项,因为值没有自动从Integer转换为String。解决方案是在el-option的:value属性中使用parseInt()方法将dictValue转换为int类型,从而确保与v-model匹配。
摘要由CSDN通过智能技术生成

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

代码如下所示

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

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

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

问题解决!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值