el-select对不同的option中的el-button设置不同的style
时间: 2023-10-13 19:23:13 浏览: 76
您可以使用 `scoped slot` 来自定义 `el-select` 的选项。这样您就可以在每个选项中使用 `el-button` 并设置不同的样式。
以下是一个示例代码:
```html
<el-select v-model="selectedOption">
<template v-for="option in options">
<el-option :key="option.value" :label="option.label" :value="option.value">
<template v-slot:default>
<el-button :class="option.buttonClass">{{ option.buttonText }}</el-button>
</template>
</el-option>
</template>
</el-select>
```
在上面的示例中,我们使用 `v-for` 循环遍历 `options`,并为每个选项定义一个 `scoped slot`。在 `scoped slot` 中,我们使用 `el-button` 并为每个选项设置不同的样式类 `option.buttonClass` 和文本 `option.buttonText`。这样您就可以根据需要为每个选项设置不同的样式和按钮文本。
注意:如果您使用 `scoped slot` 自定义 `el-select` 的选项,则需要使用 `v-model` 绑定一个值,以便在选择不同的选项时更新选中的值。在上面的示例中,我们使用 `selectedOption` 绑定 `v-model`。
阅读全文