el-date-picker 自定义显示内容

`el-date-picker`是Element UI库中的日期选择组件，它允许用户自定义显示的内容。如果你想自定义日期选择器的展示，可以利用其提供的配置选项：

1. **picker-options**属性：这是一个对象，其中包含日期选择的各种设置，如`cellClassNames`属性，你可以为每个日期单元格设置自定义类名，通过该属性传入一个函数返回类名。

<el-date-picker
  :picker-options="{
    cellClassNames: (date, type) => {
      return { 'custom-class': condition } // 根据条件动态添加class
    }
  }"
></el-date-picker>

2. **format**属性：用于指定日期格式化后的字符串。你可以在这个字段中定义自定义的日期格式。

3. **value-format**属性：当设置自定义值格式时，用户输入的值将按照这个格式转换成Date对象。

4. **render-header**和**render-cell**：这两个属性可以提供自定义视图，分别用于渲染头部和单元格内的文本。你可以在这里插入HTML模板，动态展示你需要的内容。

例如，如果你想在特定日期上显示特殊的提醒信息，你可以创建一个函数，在`render-cell`中检查当前日期并返回相应的提示文字。

<template>
  <el-date-picker
    v-bind:picker-options="{
      renderCell: (date, type) => {
        if (date.getDate() === yourCustomDay) {
          return '<span class="your-custom-class">特殊提醒</span>';
        } else {
          return date.format('YYYY-MM-DD');
        }
      }
    }"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      yourCustomDay: 15, // 示例：你想定制15号
    };
  },
};
</script>