vue实现给select框的option设置不同的背景颜色并根据背景颜色置灰对应的option选项

需求：不同的背景颜色对者不同的状态。用户需要点击select框就能直观看到option各选项代表的状态，并根据背景颜色置灰对应的option选项。

思路：用forEach给该select框的list数组的每一项添加item.color和item.disabled。

代码：

1、el-dialog中的写法如下：

    <el-dialog v-dialogDrag :title="title" :visible.sync="addCourseTicketFlag"  :appendToBody="true" width="40%">
      <el-form ref="ruleForm" :model="ruleForm" :rules="ruleFormRules" label-width="200px" class="demo-ruleForm">
        <el-form-item prop="roomId" label="预订教室：">
          <el-select v-model="ruleForm.roomId" style="width: 220px" clearable filterable placeholder="请选择教室" @change="changeRoomId" >
            <el-option v-for="item in roomList" :key="item.roomId" :label="item.roomName" :value="item.roomId"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="startDate" label="预约日期：">
          <el-date-picker v-model="ruleForm.startDate" style="width: 220px" type="date" placeholder="请选择预约日期" :picker-options="expireDateOption" @change="startDateChange" value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="课程排班班次：">
          <el-select v-model="ruleForm.courseId" style="width:220px;margin-right:10px;" clearable filterable placeholder="请选择课程排班列表" @change="courseIdChange">
            <el-option v-for="(item,index) in courseIdList" :key="index" :label="item.name" :value="item.id"/>
          </el-select>
          <el-select v-model="ruleForm.courseDetailId" style="width:220px;" clearable filterable  placeholder="请选择班次" @change="courseDetailIdChange" @click.native="getRankColor">
            <el-option :disabled="item.disabled" :style="{background:item.color}" v-for="(item,index) in courseDetailList||[]" :key="index" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="预约时段：">
          <el-time-select placeholder="开始时间" v-model="startTime" style="width: 99px" :picker-options="{start: '09:00',step: '00:05',end: '18:30'}"/> <span> 至 </span>
          <el-time-select placeholder="结束时间" v-model="endTime"  style="width: 99px" :picker-options="{start: '09:00',step: '00:05',end: '18:30',minTime: startTime}" @change="endTimeChange"/>
        </el-form-item>
        <el-form-item prop="courseDuration" label="预计课程时长(秒)：">
          <el-input style="width: 220px" v-model.trim="ruleForm.courseDuration" @keyup.native="upNumber" @change="defaultWorshipChange" clearable/></el-form-item>
        <el-form-item label="备注："><el-input style="width: 220px" v-model.trim="ruleForm.mark" clearable/></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="courseAddOrUpdate()">确认</el-button>
          <el-button type="primary" @click="addCourseTicketFlag=false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

2、需要import引入，并在data中定义需要的响应式字段：

// 引入
import {courseAddOrUpdateAction } from "@/api/user";
import {expireDateOption} from "@/utils/index";
import * as colorUtil from "@/utils/back-ground-color";

// data定义响应式字段等数据
data () {
    return {
      expireDateOption:expireDateOption,
      title:'新增课程预约',
      colorUtil:colorUtil,
      addCourseTicketFlag:false,
      startTime:null,
      endTime:null,
      ruleForm:{roomId:null,startDate:null,courseId:null,courseDetailId:null,courseDuration:null,mark:null},
      ruleFormRules:{
        roomId:[{required: true, message: '请选择教室', trigger: 'blur' }],
        courseDuration:[{required: true, message: '请选择预约课程时长', trigger: 'blur' }]
      },
      courseIdList:[],//排班列表list
      courseDetailList:[]//班次list
    }

3、重点来了，用forEach给select框的courseDetailList数组每项都添加color属性并赋值对应的颜色，给每一项加入disabled并赋值：

    courseIdChange(val){
      this.courseIdList&&this.courseIdList.forEach(item => {if(val == item.id) this.courseDetailList = item.courseDetailList;});
      this.getRankColor();
    },
    getRankColor(){
      let curRoomId=this.roomList.find(item => item.roomId == this.ruleForm.roomId)
      let curCourseId=this.courseIdList.find(item => item.id == this.ruleForm.courseId);
      this.courseDetailList&&this.courseDetailList.forEach(item => {
        let colorData=this.colorUtil.getRankHallColor(item,curRoomId,curCourseId);//这里是调用我封装好的颜色插件
        item.color=colorData.color;//用forEach给select框的courseDetailList数组每项都添加color属性并赋值对应的颜色
        if(colorData.color==colorUtil.ColorState.NoUse.color){
          item.disabled = false;//给每一项加入disabled并赋值
        }else{
          item.disabled =true;
        }
      });
    },

小伙伴们写的功能实现了吗？咱们下期见哇。