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

最新推荐文章于 2025-03-03 10:46:35 发布

原创最新推荐文章于 2025-03-03 10:46:35 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

element-ui 专栏收录该内容

115 篇文章

订阅专栏

该文章展示了如何在ElementUI的el-select组件中，根据选项的不同值设置不同的颜色。通过v-for遍历选项并结合CSS类，实现选择器颜色与选项值的联动，例如将红色警报设为红色，黄色警报设为黄色，橙色警报设为橙色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

 <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>

 cities: [{
          value: 'yellow',
          label: '黄色警报'
        }, {
          value: 'orange',
          label: '橙色警报'
        }, {
          value: 'red',
          label: '红色警报'
        }

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