elementUi的el-select同时获取value和label
时间: 2024-09-25 21:21:25 浏览: 47
Element UI的`el-select`组件是一个下拉选择框,它允许用户从预设选项中选择一项,并且可以同时获取所选值(通常是一个对象或字符串)和标签(显示在UI上的文本)。当你需要这两个信息时,你可以通过监听`select`的`change`事件来获取。这里是一个简单的示例:
```javascript
<template>
<el-select v-model="selectedOption" placeholder="请选择">
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'option1', label: '选项一' },
{ value: 'option2', label: '选项二' },
// 更多选项...
]
};
},
methods: {
handleChange(selectedValue) {
console.log('Selected value:', selectedValue); // 获取所选值
console.log('Selected label:', selectedValue.label); // 获取对应的标签
}
},
watch: {
selectedOption(newVal, oldVal) {
this.handleChange(newVal);
}
}
};
</script>
```
在这个例子中,当`selectedOption`改变时,`handleChange`方法会被调用,你可以看到`selectedValue`是所选的对象,而`selectedValue.label`则是对应于这个对象的标签。
阅读全文