如何返回当前el-select的文本值
时间: 2023-06-16 11:02:08 浏览: 44
你可以通过监听 `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` 属性,即可获取当前选中的文本值。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)