如何返回当前el-select的文本值
时间: 2023-06-16 12:02:08 浏览: 74
Element-ui中 选择器(select)多选下拉框实现全选功能.zip
你可以通过监听 `el-select` 的 `change` 事件,然后在事件处理函数中获取当前选中的文本值。具体实现可以参考以下代码:
```html
<template>
<el-select v-model="selectedOption" @change="handleChange">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
}
},
methods: {
handleChange() {
const selectedLabel = this.options.find(option => option.value === this.selectedOption)?.label
console.log('当前选中的文本值为:', selectedLabel)
}
}
}
</script>
```
在上述代码中,我们监听了 `el-select` 组件的 `change` 事件,并在事件处理函数中通过 `this.selectedOption` 获取当前选中的值,然后通过 `Array.find()` 方法找到对应的选项对象,最后通过可选链语法获取选项对象的 `label` 属性,即可获取当前选中的文本值。
阅读全文