如何自定义element-ui中el-select组件多选时选中内容的背景颜色

2023-09-11 03:27:57







## 1. 准备工作

在开始自定义之前，我们需要先确保已经安装了element-ui。如果没有安装，可以使用以下命令进行安装：

npm install element-ui


安装完成后，我们需要在项目中引入element-ui。在main.js文件中，添加以下代码：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)


## 2. 自定义CSS样式

接下来，我们需要创建一个CSS文件来存储自定义的样式。在这个文件中，我们可以使用以下代码来更改el-select组件中选中内容的背景颜色：

.el-select-dropdown__item.is-selected {
background-color: #ff0000 !important;
}


在这个代码中，我们使用了`.el-select-dropdown__item.is-selected`这个选择器来选中el-select组件中所有被选中的选项。然后，我们使用`background-color`属性来设置这些选项的背景颜色。这里，我们将其设置为红色。

## 3. 应用自定义样式

最后，我们需要将自定义的CSS样式应用到我们的项目中。我们可以通过在main.js文件中添加以下代码来实现：

import './style.css'


在这个代码中，我们将自定义的CSS文件导入到项目中。这样，el-select组件就会使用我们自定义的样式。

## 4. 使用示例

现在，我们可以使用el-select组件来创建一个多选框。在模板文件中，添加以下代码：

```

在这个代码中，我们创建了一个el-select组件，并设置了multiple属性，使其支持多选。然后，我们使用v-for循环来遍历options数组，并为每个选项创建一个el-option组件。在el-option组件中，我们使用slot="option-content"来指定选项的内容。在这个内容中，我们使用了{{ item.label }}来显示选项的标签，并使用了元素来显示选项的背景颜色。这个背景颜色是由item.bgColor属性决定的。