给ElementUI中的el-date-picker添加日期高亮显示

在写的项目中，关于会议座位安排查询项上，因为会议不止一场，所以要在选择时间的时候，有一个明确的显示标注在此时间段有会议。
在组件中有一个cellClassName属性，设置日期的 className 是Function(Date)
返回的数据是时间戳需要转换 以下是代码

  <template>
    <el-date-picker v-model="date" type="date" placeholder="选择日期" 
      size="small" :picker-options="pickerOptions">
    </el-date-picker>
  </template>

  <script>
    export default {
      data() {
        return {
          date:'',
          datePicker: [], // 存储的日期时间
          pickerOptions：{
            cellClassName:(time) => {
              let timeDate = this.convertToDate(time.getTime())
              for(var i = 0; i < this.datePicker.length; i++) {
                // datePicker是处理过后的数据格式为['2024/08/27','2024/08/28']
                  if (this.datePicker[i].includes(timeDate)) { 
                    console.log('datePicker', this.datePicker[i]);
                    return 'dateArrClass' // 返回值设置的是我们添加的类名
                  }
                }
            }
          }
        },
        methods:{
          // 日期转换
           convertToDate(isoString) {
              const date = new Date(isoString);
              const year = date.getFullYear();
              const month = (date.getMonth() + 1).toString().padStart(2, '0');
              const day = date.getDate().toString().padStart(2, '0');
               // 返回数据根据后端返回的日期来也可以是'${year}-${month}-${day}'
              return `${year}/${month}/${day}`;
          },
          handleActiveChange(value){
            // 这里我是点击活动后显示会议，后端返回会议的时间
            Api.getDate({ activity_id: value }).then(res => {
                if (res.data.list.length === 0) {
                    this.date = ''
                } else {
                    // 默认显示第一个日期
                    this.date = res.data.list[0].date
                    // 循环拿到数据中的日期重新处理
                    for(var i = 0; i < res.data.list.length; i++) {
                      this.datePicker.push(res.data.list[i].date)
                    }
                }
            })
          },
        }
      }
    }
        
  </script>

  <style lang="less">
    // 这里不加scoped是因为日期选择框是默认挂载到body上,所以在scoped的属性style下无法修改改样式，加一个不带scoped的style即可
    .dateArrClass > div::after{
        content: '';
        position: absolute;
        right: 8px;
        top: 23px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: rgb(180, 13, 13)
    }
  </style>