elementui 日期选择器el-date-picker给指定日期添加圆点标注

在Element UI的日期选择器el-date-picker中，要给特定的日期添加圆点标注，可以使用cellClassName属性来为特定日期添加自定义的类名，然后通过CSS样式来实现标注。

以下是一个简单的示例，展示如何给2023年2月15日添加圆点标注：

<template>
  <el-date-picker
    v-model="value"
    type="date"
    :cell-class-name="markDate"
  ></el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    markDate({ date }) {
      const targetDate = '2023-02-15'; // 需要标注的日期
      return date.toDateString() === new Date(targetDate).toDateString() ? 'marked-date' : '';
    }
  }
};
</script>
 
<style>
/* 添加圆点标注的样式 */
.marked-date .el-date-picker__calendar-day {
  position: relative;
}
 
.marked-date .el-date-picker__calendar-day::after {
  content: '●';
  position: absolute;
  color: red;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
}
</style>

在上述代码中，markDate方法会判断当前日期是否是需要标注的日期，如果是，则返回一个自定义的类名marked-date。在CSS中定义了.marked-date类，它会给日期添加一个圆圈标记。通过调整CSS样式，可以自定义圆点的颜色和大小。