<template>
<div>
<el-select v-model="selectedValue" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
@click="handleOptionClick(item)"
></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
options: [
{ value: 'value1', label: '选项1' },
{ value: 'value2', label: '选项2' },
{ value: 'value3', label: '选项3' },
],
};
},
methods: {
handleOptionClick(item) {
console.log('Clicked option:', item);
},
},
};
</script>
<style scoped>
/* 你的样式 */
</style>
通过控制台打印可以发现这个点击事件并没有生效
这里我们给@click 添加 native 修饰符 @click.native
然后在进行事件绑定,这个点击事件即可生效
<template>
<div>
<el-select v-model="selectedValue" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
@click.native="handleOptionClick(item)"
></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
options: [
{ value: 'value1', label: '选项1' },
{ value: 'value2', label: '选项2' },
{ value: 'value3', label: '选项3' },
],
};
},
methods: {
handleOptionClick(item) {
console.log('Clicked option:', item);
},
},
};
</script>
<style scoped>
/* 你的样式 */
</style>