el-select 选择后获取key 和label的值
在 Vue.js 的 el-select
组件中,你可以通过监听 change
事件来获取所选项的 key
和 label
值。以下是一个示例代码:
<template>
<div>
<el-select v-model="selectedItem" @change="handleSelectChange" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.key"
:label="item.label"
:value="item"
></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: null,
options: [
{ key: '1', label: 'Option 1' },
{ key: '2', label: 'Option 2' },
{ key: '3', label: 'Option 3' }
]
};
},
methods: {
handleSelectChange(value) {
console.log('Selected Key:', value.key);
console.log('Selected Label:', value.label);
}
}
};
</script>