elementUI的el-select 默认值显示value不显示label问题

LXXgalaxy

已于 2023-11-30 10:23:11 修改

阅读量2.8k

点赞数 9

分类专栏： elementUI 文章标签： elementui 前端

于 2023-02-23 16:53:41 首次发布

本文链接：https://blog.csdn.net/galaxyJING/article/details/129184853

版权

elementUI 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

el-select 默认值显示value不显示label问题

在用el-select做页面的时候，拿到后台传来的list，绑定后到el-select之后默认值显示value不显示label。

原写法：

<el-select v-model="id" placeholder="行业" style="width: 100%">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

原因是返回的数字和el-option选框里value值的类型对应不上

一个是 Numer 一个是 String。

查看一下后台返回的list 发现，返回的value是String类型，而不是Number。而这里改成Number就ok了。

如果应该是字符 option里是数字的话就转字符，总之要类型统一。

转换数字：parseInt(item.value)

转换字符串：item.value.toString() / item.value+''

更改后：

 <el-select v-model="id" placeholder="行业" style="width: 100%">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="parseInt(item.value)">
                        </el-option>
</el-select>

问题解决~~