【el-select想在change事件上传递option对象（vue 3中@click.native 已废弃[deprecated]）】

weixin_45658815

于 2024-03-11 16:00:54 发布

阅读量919

点赞数 10

分类专栏：前端学习文章标签： vue.js javascript 前端 elementui vue

本文链接：https://blog.youkuaiyun.com/weixin_45658815/article/details/136626061

版权

前端学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue3版本的ElementUI中的el-select组件中，由于click修饰符被移除，使用v-on:click事件来实现在change事件中传递option对象，以处理项目角色的选择。

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

前言

看了许多文章，比较有效的是给el-option绑定@click.native，但是在vue3中修饰符已经被移除，所以需要使用v-on:click

实现

<el-form-item label="项目角色" prop="projectRoleName">
	<el-select v-model="formData.projectRoleName" placeholder="请选择项目角色">
		<el-option v-for="item in roleTypeOptions"
		:key="item.id"
		:value="item.projectRoleName"
		v-on:click="handleRoleChange(item.id)"
		/>
	</el-select>
</el-form-item>

const handleRoleChange=(id)=>{
	console.log(id)
}