el-select 获取label值
时间: 2023-08-15 20:14:08 浏览: 122
el-select获取选中的label值.pdf
5星 · 资源好评率100%
对于 el-select 组件来说,要获取选中项的 label 值,可以通过 v-model 双向绑定一个变量来实现。例如:
```html
<template>
<div>
<el-select v-model="selectedValue" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<p>选中的 label 值为: {{ selectedLabel }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' },
],
selectedValue: '',
};
},
computed: {
selectedLabel() {
const selectedOption = this.options.find(
(item) => item.value === this.selectedValue
);
return selectedOption ? selectedOption.label : '';
},
},
};
</script>
```
在上述代码中,我们通过 v-model 绑定 `selectedValue` 变量来获取选中的值,然后通过 computed 属性 `selectedLabel` 来获取选中项的 label 值。最后在模板中展示 `selectedLabel` 的值即可。
阅读全文