element ui 日期选择器el-date-picker 修改指定日期背景

HTML部分

<el-date-picker
 popper-class="topPicker"
 :picker-options="pickerOptions"            通过 picker-options 实现
 v-model="value1"
 ref="daterange"
 @change="changeDateFun"
 value-format="yyyy-MM-dd"
 format="yyyy-MM-dd"
 type="datetime"
 placeholder="选择日期时间">
</el-date-picker>

script部分

export default {
    data() {
        return {
            stopTime: [                   没有数据的时间
               "2023-08-01",
               "2023-08-15",
               "2023-08-29"
            ],
            okTime:[                       有数据的时间
                "2023-08-10",
                "2023-08-18",
                "2023-08-20"
            ],
            pickerOptions: this.customDateStyle(),
       }
    }，
    methods: {
    	customDateStyle(){
            let self = this;
            return {
            	cellClassName(time) {
                let day = time.getDate();
                if (day < 10) {
                	day = "0" + day;
                };
                let month = time.getMonth() + 1
                if (month < 10) {
                	month = "0" + month;
                };
                let year = time.getFullYear();
                let res = year + "-" + month + "-" + day;
                for (let i = 0; i < self.stopTime.length; i++) {
                	let _time = self.stopTime[i];
                    if (res == _time) {
                    	return 'stopColor';
                    } 
             	}
                for (let i = 0; i < self.okTime.length; i++) {
                	let _time = self.okTime[i];
                    if (res == _time) {
                    	return 'okColor';
                    } 
             	}
  	           }
            }
        },
    }
}

style部分

<style lang="scss">
.stopColor {
    div{
        span {
            color: #fff;
	        background-color: #E73939; 
        }
    } 
}
.okColor {
    div{
        span {
            color: #fff;
	        background-color: #01BF08; 
        }
    } 
}
</style>

效果图