[element-ui] el-select 设置元素不同颜色_vue+elementui select 颜色

 <el-select v-model="value" 
            :name="'my-select-' + value"
             placeholder="请选择">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <span :class="{red: value === 'red',yellow: value === 'yellow',orange: value === 'orange' }">
        {{ item.label }}</span>
    </el-option>
  </el-select>
1
2
3
4
5
6
7
8
9
10
11
12

 cities: [{
          value: 'yellow',
          label: '黄色警报'
        }, {
          value: 'orange',
          label: '橙色警报'
        }, {
          value: 'red',
          label: '红色警报'
        }
1
2
3
4
5
6
7
8
9
10

.el-select [name="my-select-red"] {
  color: red;
}

.el-select [name="my-select-orange"] {
  color: orange;
}

.el-select [name="my-select-yellow"] {
  color: yellow;
}

.el-select [name="my-select-yellow"] {
  color: yellow;
}

.el-select-dropdown__item.selected 
  .red {
    color: orange;
  }
  
.el-select-dropdown__item.selected 
.yellow {
    color: yellow;
  }
.el-select-dropdown__item.selected 
  .orange {
    color: orange;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

参考：

element-ui 中 el-select 组件 如何设置元素不同颜色