vue怎么获取el-options选中项的label值
时间: 2024-05-01 09:23:52 浏览: 73
可以使用 `ref` 属性来获取 `el-select` 组件的实例,然后通过 `this.$refs.xxx.$refs.yyy` 获取到 `el-options` 的实例,从而获取到选中项的 label 值。
具体的代码可以参考下面的示例:
```html
<template>
<div>
<el-select v-model="selected" ref="select">
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
<br>
<p>选中项的 label 值为:{{selectedLabel}}</p>
</div>
</template>
<script>
export default {
data() {
return {
selected: '',
options: [
{ label: '选项一', value: '1' },
{ label: '选项二', value: '2' },
{ label: '选项三', value: '3' }
]
}
},
computed: {
selectedLabel() {
const option = this.$refs.select.$refs.options.find(option => option.selected)
return option ? option.label : ''
}
}
}
</script>
```
在上面的代码中,首先定义了一个 `el-select` 组件和一个计算属性 `selectedLabel`,用于获取选中项的 label 值。
然后在 `el-select` 组件上添加了 `ref="select"` 属性,用于获取 `el-select` 组件的实例。
最后在计算属性 `selectedLabel` 中,通过 `this.$refs.select.$refs.options.find(option => option.selected)` 获取到选中的 `el-option` 实例,从而获取到选中项的 label 值。
阅读全文