解决element-ui的下拉框有值却无法选中的情况

最新推荐文章于 2024-04-26 11:35:50 发布

原创最新推荐文章于 2024-04-26 11:35:50 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #java

Java 同时被 2 个专栏收录

31 篇文章

订阅专栏

前端

8 篇文章

订阅专栏

本文详细讲述了如何处理Element UI中下拉框选项无法选中的问题，关键在于识别数据类型差异，通过将后端返回的字符串转换为整数数组，并调整v-model绑定，确保正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决element-ui的下拉框有值却无法选中的情况

问题描述：数据从后台查询出来了，el-select 数据可以选中，但是option是没有选中的。

分析：select选择器对数据的显示，是匹配到select下拉框数据源中对应的value值时则会显示相应的label；若是没有匹配到，则显示的是该value。

显然，这里是因为没有匹配到下拉框中的value值，直接显示的这个字段的值。

下拉框代码如下

<el-col  class="col1">
    <el-form-item label="组织成员：" >
        <!-- 二级分类 -->
        <el-select v-model="MtpRulesForm.numberId" multiple collapse-tags  @change="change()" placeholder="请选择" class="selectList" prop="organizationMember">
            <el-option
                       v-for="subject in organizationMember"
                       :key="subject.id"
                       :label="subject.userName"
                       :value="subject.id"/>
        </el-select>
    </el-form-item>
</el-col>

下拉框中的数据源organizationMember是一个数组，选中后的值也是一个数组。但是在后端存储的时候是转换成字符串存到数据库中的，所以在编辑界面从后端获取的返回值是一个字符串，首选要把这个字符串转换成数组，绑定到select 的v-model属性上。

getData(){
    # 原代码（错误的）
    this.MtpRulesForm.numberId = response.numberId.split(',')
}

原数据

截取后的数据

解决方案

发现select下拉框中的id 和 v-mode里边绑定的id的数据类型不一致，虽然数据的值是一样的，但是一个是字符串，一个是整型数值。将后端返回的字符串在转换成数组时，转换成整形数组，下拉框即可正确显示。

修改代码（前端）

// 将字符串转换位数组
var numberId = response.numberId.split(',')
console.log(numberId)
var arrNumberId = []
for (var arrNum in numberId) {
arrNumberId.push(parseInt(numberId[arrNum]))
}
// 将新的numberId 数组，绑定到select空间的v-model上
this.MtpRulesForm.numberId = arrNumberId
console.log(arrNumberId)

效果