elementui的el-select组件的change方法

最新推荐文章于 2025-04-14 11:19:33 发布

小趴菜呢

最新推荐文章于 2025-04-14 11:19:33 发布

阅读量5.1w

点赞数 9

分类专栏： elementui vue

本文链接：https://blog.youkuaiyun.com/weixin_45442630/article/details/107313975

版权

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

elementui

6 篇文章

订阅专栏

本文介绍如何在Element UI的el-select组件中，通过@change事件获取当前选中项的完整对象，解决value值不匹配的问题。利用find()方法在下拉选项中精确查找并返回所需对象。

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

1.当el-select组件中的el-option标签中绑定的value值不是我们想要的时候，我们可以使用@change方法，获取到当前选中的对象。

<el-form-item label="选择院系:" prop="college" :rules="{required: true, message: '请选择院系', trigger: 'blur'}">
	<el-select v-model="dynamicValidateForm.college" placeholder="请选择学历" @change="changeValue($event)">
		<el-option v-for="(option,index) in endOptions" :key="option.index" :label="option.fname" :value="option.fcode">
		</el-option>
	</el-select>
</el-form-item>

//change方法
changeValue(value){
	var obj = {};
	//使用find()方法在下拉数据中根据value绑定的数据查找对象。
   obj = this.endOptions.find(function(item){
		return item.fcode === value;
		})
		console.log(obj);
	},