el-select 下拉框显示时修改选项的样式
时间: 2023-10-31 17:12:19 浏览: 108
el-select 下拉框多选实现全选的实现
5星 · 资源好评率100%
要修改 el-select 下拉框选项的样式,可以使用 scoped slot 的方式来自定义下拉框选项的渲染,这样就可以自由地修改选项的样式了。以下是一个示例:
```html
<el-select v-model="selectedOption">
<template slot="options" slot-scope="{ option }">
<span :class="{ 'is-highlighted': option.value === selectedOption }">{{ option.label }}</span>
</template>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
```
在这个示例中,我们使用了 el-select 的 scoped slot `options` 来自定义下拉框选项的渲染。在模板中,我们使用了一个 span 元素来渲染选项,并根据选项是否被选中来添加一个 `is-highlighted` 的 class。然后在 CSS 中,我们可以定义这个 class 的样式:
```css
.is-highlighted {
background-color: yellow;
}
```
这样,当一个选项被选中时,它的背景色就会变成黄色。你可以根据自己的需要修改样式。
阅读全文