element+select组件选中的值按条件标红

Question

问题描述

element 的select组件，当备选数据中的部分数据具备某些特殊条件，在选中后标红显示，如何实现

问题出现的环境背景及自己尝试过哪些方法

多选，如下所示，第一条数据有marked属性，当选中时标红

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    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 {
        options: [{
          value: 'HTML',
          label: 'HTML',
          marked: true
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value: []
      }
    }
  }
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择文章标签">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :class="item.marked?'red-color':''"
      >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'HTML',
          label: 'HTML',
          marked: true
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value: []
      }
    }
  }
</script>
<style>
.selected.red-color{
    color:red
}
</style>