el-select change方法获取labal值
时间: 2023-10-31 10:55:31 浏览: 135
在 Element UI 的 `el-select` 组件中,可以通过 `change` 事件来获取选中项的 label 值。以下是一个示例:
```html
<template>
<el-select v-model="selectedValue" @change="handleChange">
<el-option label="Option 1" value="option1"></el-option>
<el-option label="Option 2" value="option2"></el-option>
<el-option label="Option 3" value="option3"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: ''
};
},
methods: {
handleChange(value) {
const selectedOption = this.$refs.select.getOption(value);
const selectedLabel = selectedOption.label;
console.log('Selected Label:', selectedLabel);
}
}
};
</script>
```
在上面的示例中,通过绑定 `v-model` 来获取选中的值,然后在 `change` 事件处理方法 `handleChange` 中获取选中项的 label 值。通过 `this.$refs.select.getOption(value)` 方法可以获取选中项的选项对象,进而获取其 label 值。
请确保在模板中给 `el-select` 添加了 `ref="select"` 属性,以便在组件实例中引用该组件。
当选项发生变化时,`handleChange` 方法会被调用,并打印出选中项的 label 值。你可以根据需要进行进一步处理。
阅读全文