高度定制elementui 的Calendar 日历实现自定义格式展示

在Element UI中，可以通过自定义内容的方式来定制Calendar组件的显示格式。以下是一个简单的例子，展示如何定制Calendar的日期格式：

<template>
  <el-calendar :range="range" :first-day-of-week="1" :format="format">
    <template #dateCell="{date, data}">
      <div class="custom-date-content">
        {{ data.day.split('-').slice(2).join('-') }}
      </div>
    </template>
  </el-calendar>
</template>
 
<script>
export default {
  data() {
    return {
      range: [],
      format: {
        // 自定义日期格式
        // 这里的例子将日期格式定制为YYYY-MM-DD
        // 注意：Element UI的Calendar组件内部使用的是日期对象，所以这里的格式化主要是为了展示
        // 如果需要进行日期计算，请使用日期对象而非字符串
        // 日期格式化函数
        // date: 日期对象
        // return: 格式化后的字符串
        // 这里的例子简单地返回了日期的字符串格式
        stringify: (date) => {
          return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        }
      }
    };
  }
};
</script>
 
<style>
.custom-date-content {
  text-align: center;
  height: 40px;
  line-height: 40px;
}
</style>

在这个例子中，我们定义了一个format对象，其中stringify函数负责将日期对象格式化为字符串。在<template #dateCell>内部，我们使用了一个自定义的div来展示日期，并通过data.day获取日期字符串，然后切片和拼接成YYYY-MM-DD的格式。这样，Calendar组件就会根据我们的自定义格式来显示日期。