侧边栏壁纸
博主头像
孔子说JAVA博主等级

成功只是一只沦落在鸡窝里的鹰,成功永远属于自信且有毅力的人!

  • 累计撰写 297 篇文章
  • 累计创建 134 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

若依vue中el-select绑定值为整数无法默认选择

孔子说JAVA
2021-09-09 / 0 评论 / 0 点赞 / 192 阅读 / 1,393 字 / 正在检测是否收录...

vue中,el-select下拉列表中绑定的值默认按字符串匹配,如果绑定的值为整数,按通用写法会出现无法默认选择的问题,这时候会直接显示数字,而不是选择列表中的某个选项。以下分别为绑定值为各种类型的写法。

1、绑定值为字符串 - 通用

<el-select v-model="form.dataStatus" placeholder="请选择状态">
   <el-option label="已发布" value="1" />
   <el-option label="不适宜公开" value="2" />
   <el-option label="审核中" value="4" />
</el-select>

2、绑定值为字符串 - 字典

statusOptions为字典数据列表。

<el-select v-model="form.dataStatus" placeholder="请选择状态">
   <el-option
      v-for="dict in statusOptions"
      :key="dict.dictValue"
      :label="dict.dictLabel"
      :value="dict.dictValue"
   />
</el-select>

3、下拉列表绑定值为整数 - 通用

与字符串区别是在value前加冒号。

<el-select v-model="form.dataStatus" placeholder="请选择状态">
   <el-option label="已发布" :value="1" />
   <el-option label="不适宜公开" :value="2" />
   <el-option label="审核中" :value="4" />
</el-select>

4、下拉列表绑定值为整数 - 字典

statusOptions为字典数据列表。

与字符串区别::value="dict.dictValue"改为:value=“parseInt(dict.dictValue)”,即将原来的string类型通过 parseInt() 方法转换为int类型。

<el-select v-model="form.dataStatus" placeholder="请选择状态">
   <el-option
      v-for="dict in statusOptions"
      :key="dict.dictValue"
      :label="dict.dictLabel"
      :value="parseInt(dict.dictValue)"
   />
</el-select>
0

评论区