解决：el-select 数据回显后，无法选中赋值问题

解决Vue Select组件动态赋值问题与回显

最新推荐文章于 2025-09-05 17:17:27 发布

原创最新推荐文章于 2025-09-05 17:17:27 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

element-ui

11 篇文章

订阅专栏

本文讲述了在使用Element UI的el-select组件时，如何实现在选择后更新model并根据后台返回的数据正确回显选中项的问题，包括如何通过`v-model`绑定和`change`事件处理。

这是要回显的部门信息，如图所示

图1：从后台拿回数据显示为admin
在这里插入图片描述
图2：拿到数据后回显

图3：当我想要选中其它选项的时候，控制台能拿到这一项的id，但是文字没有显示到select中

好了，现在就看怎么解决的吧

html:

<el-form-item label="角色" prop="roleId ">
	<el-select v-model="roleForm.roleId " placeholder="请选择" clearable @change="roleChange">
		<el-option
			v-for="item in roleArr"
	        :key="item.id"
	        :label="item.roleName"
	        :value="item.id">
	     </el-option>
     </el-select>
</el-form-item>

js:

roleForm:{
	roleId:'',
	roleName:''
},

roleChange(id){ //这个id是:value="item.id"中的id
      this.roleForm.roleId=id;
      var obj = {};
      //roleArr是下拉列表绑定的数组
      obj = this.roleArr.find(function(item){
        return item.id === id
      })
      this.roleForm.roleName=obj.roleName;
},

完结撒花