el-select根据值选中的option展示的value值,而不是label值
时间: 2024-04-24 09:23:43 浏览: 93
el-select获取选中的label值.pdf
5星 · 资源好评率100%
如果你想让el-select根据值选中的option展示实际的value值而不是label值,你可以使用scoped slot来自定义选项的展示内容。
下面是一个示例代码:
```html
<template>
<el-select v-model="selectedValue" placeholder="请选择">
<template #default="{ option }">
<span>{{ option.value }}</span>
</template>
<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 {
selectedValue: '',
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
}
}
}
</script>
```
在上述代码中,我们使用了el-select的scoped slot来自定义选项的展示内容。通过template标签和#default来定义默认的scoped slot,其中的option参数表示当前的选项对象。
在scoped slot中,我们使用`{{ option.value }}`来展示选项的value值。
这样,当用户选择一个选项时,el-select会根据选中的值更新selectedValue,并展示对应选项的value值。
阅读全文