[element-ui] el-select 设置元素不同颜色_修改el-selec 框内的颜色

1. 大体 分为两步  一是 动态添加类名  ，二是修改下拉框颜色  

样式如下（具体问题还要按照值和键自行区分）

<template>
  <el-select v-model="value"
        :name="'my-select-' + value"
         placeholder="请选择">
    <el-option
      v-for="item in timeSeg01S"
      :key="item.value"
      :label="item.text"
      :value="item.value"
  >
 
    <span :class="{red: value === 0,yellow: value === 1,orange: value === 2,pink: value === 3}"> 
{{ item.text }}</span>
    </el-option>
  </el-select>
 
</template>
<script>
 
export default {
  data() {
    return {
      value:'',
      formData: {},
 
      timeSeg01S: [
 
        { value: 0, text: '尖费率' },
 
        { value: 1, text: '峰费率' },
 
        { value: 2, text: '平费率' },
 
        { value: 3, text: '谷费率' },
 
      ]
 
    }
 
  },
  methods: {
 
    SelectimeSeg(val, key) {
 
      console.log(val, key)
 
    }
 
  }
 
}
 
</script>
<style lang='scss' >
 
.el-select [name="my-select-0"] {
 
  color: red;
 
}
 
.el-select [name="my-select-1"] {
 
  color: orange;
 
}
.el-select [name="my-select-2"] {
 
  color: yellow;
 
}
 
.el-select [name="my-select-3"] {
 
  color: rgb(236, 122, 175);
}
 
.el-select-dropdown__item.selected
  .red { color: orange;
  }
 
.el-select-dropdown__item.selected
 
.yellow {
 
    color: yellow;
 
  }
 
.el-select-dropdown__item.selected
 
  .orange {
 
    color: orange;
 
  }
 
</style>