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

Question

黄色报警选中后变成黄色
红色报警选中后变成红色

Answer 1

给你写个简单列子吧
主要就是用css实现的
html代码
2022年3月6日18:15:01
通过官方文档发现有个name属性
:name="'my-select-' + value"
可以给select的input加上name属性

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
<template>
  <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>
</template>
</div>

css代码

@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

.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;
  }

js代码

var Main = {
    data() {
      return {
        cities: [{
          value: 'yellow',
          label: '黄色警报'
        }, {
          value: 'orange',
          label: '橙色警报'
        }, {
          value: 'red',
          label: '红色警报'
        }
  ],
        value: ''
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')