el-select 下拉框显示时修改选项的样式

要修改 el-select 下拉框选项的样式，可以使用 scoped slot 的方式来自定义下拉框选项的渲染，这样就可以自由地修改选项的样式了。以下是一个示例：

<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 的样式：

.is-highlighted {
  background-color: yellow;
}

这样，当一个选项被选中时，它的背景色就会变成黄色。你可以根据自己的需要修改样式。

相关问题

el-form里面的el-select中的el-option下拉框给的背景色，为什么留白了

el-select 中的 el-option 的背景色留白可能是由于以下原因导致的：

1. el-select 中的 el-option 设置了 padding 或 margin，使得背景色无法填满整个选项；
2. el-select 的样式与 el-option 的样式有冲突，导致背景色无法正常显示；
3. 页面中的其他样式影响了 el-select 中的 el-option 的显示。

解决方法：

1. 检查 el-option 是否设置了 padding 或 margin，如果有则将其移除；
2. 检查 el-select 的样式与 el-option 的样式是否有冲突，可以通过调整样式解决；
3. 可以使用浏览器开发者工具检查页面中的其他样式是否影响了 el-select 中的 el-option 的显示，如果有则将其修复或移除。

el-select下拉框去掉箭头

要去掉el-select下拉框的箭头，可以通过以下两种方式实现：

1. 使用CSS样式

.el-select .el-input__suffix {
    display: none;
}

2. 使用el-select组件的props

在el-select组件中设置props的值，将箭头隐藏起来。

<el-select placeholder="请选择" :arrow-show="false">
    <el-option label="选项1" value="option1"></el-option>
    <el-option label="选项2" value="option2"></el-option>
    <el-option label="选项3" value="option3"></el-option>
</el-select>