element ui时间选择器添加时间标注

 <el-date-picker
        v-model="formData.registerDate"
        type="date"
        :picker-options="customPickerOptions"
        popper-class="el-date-picker-custom"
        @focus="initCustomDate"
        placeholder="选择日期">
</el-date-picker>
computed:{
    customPickerOptions () {
        let that = this
        return {
            cellClassName (Date) {
                if (that.customDateArr.includes(that.DateToformatDate(Date,'YYYY-MM-DD'))) {
                    // 自定义的类名, 自行确保这个类型的唯一性,以免覆盖样式
                    return 'custom_date_class'
                }
            }
        }
    }
},
methods: {
 // 模拟异步获取哪些日期是 已标记 的
      async initCustomDate (Date) {
          setTimeout(() => {
              this.customDateArr = ['2021-05-24', '2021-05-27', '2021-05-10', '2021-05-18']
          }, 100)
      },
     // 日期格式化
     DateToformatDate(date, fmt) {
       //按格式返回当前时间
        if (fmt == '' || fmt == null) {
            fmt = 'YYYY-MM-DD';
        }
        if (date == '' || date == null) {
            date = new Date();
        } else {
            if (Object.prototype.toString.call(date) !== '[object Date]') {
                date = new Date(date);
            }
        }
        var o = {
        	"Y+": date.getFullYear(), //年
            "M+": date.getMonth() + 1, //月份
            "D+": date.getDate(), //日
            "H+": date.getHours(), //时
            "m+": date.getMinutes(), //分
            "s+": date.getSeconds(), //秒
        };
        if (/(Y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    },
 }


 style:
 // 日期时间选择器 已标记 样式
    .custom_date_class {
        span {
            background: #ea6151;
            color: red;
            border-radius: 50%;
            color: #fff !important;
            &:hover {
                background-color: #409eff;
            }
        }
        &::after {
            content: "已标记";
            display: inline-block;
            position: absolute;
            width: 100%;
            font-size: 12px;
            color: red;
            bottom: -15px;
            left: 0;
            text-align: center;
            white-space: nowrap;
        }
    }
    .el-date-picker-custom {
        // 用了/deep/后不兼容ie,所以还是不要随便加上样式穿透,vue-cli3以上也不支持/deep/
        // /deep/
        .el-date-table td {
            padding: 10px 0;
        }
    }