解决el-select选项为对象时回显问题

最新推荐文章于 2025-09-18 13:39:47 发布

原创最新推荐文章于 2025-09-18 13:39:47 发布 · 9.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

本文探讨了在Vue中使用el-select组件时遇到的问题，当绑定值为对象时，回显不正常。错误做法是将value设置为对象的id，导致组件无法显示。正确的解决方案是将:value改为直接绑定对象，使value与选项对象保持一致。通过这种方式，el-select可以正确显示回显数据。

问题：当el-select的绑定值为对象时，回显时只能赋值字符串，不能赋值对象；赋值对象后不显示，代码如下：

字段定义：

updateSchoolMod:{},

回显方法中赋值：

this.updateSchoolMod.id = row.schoolId;
this.updateSchoolMod.schoolName = row.schoolName;

 <el-form-item label="学校">
     <el-select value-key="id" v-model="updateSchoolMod" placeholder="请选择学校" style="min-width: 100%;"
                filterable clearable @change="getUserList">
         <el-option
                    v-for="item in schoolList"
                    :key="item.id"
                    :label="item.schoolName"
                    :value="item.id">
         </el-option>
     </el-select>
 </el-form-item>

正确写法：

 <el-form-item label="学校">
     <el-select value-key="id" v-model="updateSchoolMod" placeholder="请选择学校" style="min-width: 100%;"
                filterable clearable @change="getUserList">
         <el-option
                    v-for="item in schoolList"
                    :key="item.id"
                    :label="item.schoolName"
                    :value="item">
         </el-option>
     </el-select>
 </el-form-item>

错误原因如下图：:value="item"，不能写成:value="item.id":