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

Posted 2021-12-29 孔子-说

目录

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

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

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

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

---

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>