菜虚鲲
2021-09-09 17:38
采纳率: 100%
浏览 57
已结题

element-ui 中 el-select 组件 多选时,如何根据数据的属性自定义选中内容的背景颜色?

img

img


如何根据 options 中每个选项元素的 bgColor 属性来控制被选中的内容的不同的背景颜色呢? 就是达到上图的显示效果


<template>
  <el-select v-model="value1" multiple 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: '选项1',
          label: 'aaa',
          bgColor:'#409EFF'
        }, 
        {
          value: '选项2',
          label: 'bbb',
          bgColor:'red'
        }, 
        {
          value: '选项3',
          label: 'ccc',
          bgColor:'orange'
        }, 
        {
          value: '选项4',
          label: 'ddd',
          bgColor:'yellow'
        }, 
        {
          value: '选项5',
          label: 'eee',
          bgColor:'brown'
        }],
        value1: [],
      }
    }
  }
</script>
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 前端纸飞机 2021-09-09 17:44
    已采纳
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题