解决el-select回显异常显示option选项的value 而不是显示label

最新推荐文章于 2024-04-16 16:09:05 发布

JasonHPC

最新推荐文章于 2024-04-16 16:09:05 发布

阅读量5.7k

点赞数 10

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/u013675978/article/details/121977552

版权

废话：今天在使用el-select回显数据的时候出现回显option选项的value 而不是显示label的问题。以为是渲染的问题，试了很多方法入 this.$set() this.$forceUpdate()等等都没有解决。

原因：

回显的value和选项value类型不同
form中v-model="form.seriesId"是字符串类型
option中:value="item.id" 选项id是数字类型

解决方法：
:value="item.id" 改为 :value="item.id+''"（转换成字符串）

<el-form-item :label="系列" prop="seriesId">
  <el-select v-model="form.seriesId" value-key="id" >
    <el-option v-for="item in SeriesList" :key="item.id" :label="item.seriesName"
               :value="item.id+''"/>
  </el-select>
</el-form-item>