el-select对不同的option设置不同的style
时间: 2023-10-13 21:18:00 浏览: 38
你可以使用 `scoped slot` 来自定义 `el-select` 组件中每个选项的显示方式。首先,在 `el-select` 组件中添加 `template` 作为选项的显示方式,如下所示:
```html
<el-select v-model="value">
<template slot="default" slot-scope="scope">
<span :style="scope.option.style">{{ scope.option.label }}</span>
</template>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:style="item.style">
</el-option>
</el-select>
```
然后,你可以在 `options` 数组中为每个选项设置不同的样式,如下所示:
```js
data() {
return {
value: '',
options: [
{ value: 'option1', label: 'Option 1', style: { color: 'red' } },
{ value: 'option2', label: 'Option 2', style: { color: 'green' } },
{ value: 'option3', label: 'Option 3', style: { color: 'blue' } },
]
}
}
```
在上面的代码中,我们为每个选项设置了不同的 `style`。这些 `style` 将通过 `scoped slot` 中的 `scope.option.style` 属性传递给每个选项的显示方式。
这样,每个选项就可以根据自己的 `style` 来显示了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)