关于elementUi中el-select组件根据下拉框选择的值不同所显示的背景颜色不同

在Element UI中，可以通过自定义样式来改变el-select组件选中项的背景颜色。以下是一个简单的例子，演示如何根据不同的选中值改变背景颜色：

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    };
  }
};
</script>
 
<style scoped>
/* 根据selectedValue的值改变背景颜色 */
.el-select .el-input .el-input__inner {
  background-color: transparent;
}
 
/* 选中样式 */
.el-select .el-input .el-input__inner:focus {
  background-color: transparent;
}
 
/* 选中项的样式 */
.el-select-dropdown__item.selected {
  background-color: transparent;
}
 
/* 根据selectedValue的值改变选中项的背景颜色 */
.el-select-dropdown__item.selected.option1 {
  background-color: #409EFF; /* 默认背景色 */
}
 
.el-select-dropdown__item.selected.option2 {
  background-color: #67C23A; /* 自定义背景色 */
}
 
.el-select-dropdown__item.selected.option3 {
  background-color: #E6A23C; /* 自定义背景色 */
}
</style>

在这个例子中，我们定义了三种不同的背景颜色，分别对应于options数组中的option1、option2和option3。当用户选择不同的选项时，下拉菜单中的对应项将会显示不同的背景色。这是通过为每个选项项添加一个与其值对应的类名来实现的。

请注意，这个例子使用了scoped样式，这意味着样式只会应用到包含这段代码的组件上。如果你希望这些样式影响全局，可以去掉scoped属性。