Element-UI日期选择器el-date-picker给指定日期添加红点标注

在Element UI的日期选择器el-date-picker中，要给特定的日期添加红点标注，可以通过自定义内容的方式实现。你可以利用Cell和Date对象的属性来判断是否为特定日期，并通过插槽自定义显示。

以下是一个简单的示例，展示如何给特定日期添加红点标注：

<template>
  <el-date-picker
    v-model="value"
    type="date"
    placeholder="选择日期"
    :cell-class-name="cellClassName"
  >
    <template #default="{ date }">
      <div class="date-cell">
        {{ date.getDate() }}
        <span v-if="isSpecialDay(date)" class="date-dot"></span>
      </div>
    </template>
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    cellClassName({ date }) {
      if (this.isSpecialDay(date)) {
        return 'special-day';
      }
    },
    isSpecialDay(date) {
      const specialDay = new Date(2023, 3, 15); // 特定日期：2023年4月15日
      return date.getDate() === specialDay.getDate() &&
        date.getMonth() === specialDay.getMonth() &&
        date.getFullYear() === specialDay.getFullYear();
    }
  }
};
</script>
 
<style>
.special-day .el-date-picker__calendar-day {
  position: relative;
}
 
.special-day .date-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 5px;
  height: 5px;
  background-color: red;
  border-radius: 50%;
}
</style>

在这个示例中，isSpecialDay 方法用于判断当前日期是否为特定日期。如果是，则通过cellClassName属性返回一个类名special-day，然后在自定义内容插槽中，通过添加一个<span>元素来模拟红点。CSS样式.special-day .date-dot定义了红点的样式。