element-plus Calendar 日历如何自定义日历头部

Element Plus Calendar组件提供了一种灵活的方式来定制日历头部。要自定义日历头部，你可以通过`header-render`属性来自定义日历头部的内容渲染。这个属性接受一个函数作为值，该函数会在每个星期开始时被调用，返回一个HTML元素或Vue组件。

以下是一个简单的例子：

<template>
  <el-calendar
    v-model="calendarValue"
    header-render="renderHeader"
  ></el-calendar>
</template>

<script>
export default {
  data() {
    return {
      calendarValue: '',
      customHeaderTemplate: `
        <div class="custom-header">
          <button @click="prevMonth">上月</button>
          <span class="current-month">{{ currentDate }}</span>
          <button @click="nextMonth">下月</button>
        </div>
      `,
    };
  },
  methods: {
    renderHeader(currentDate) {
      // currentDate参数包含了当前显示的日期
      return this.customHeaderTemplate;
    },
    prevMonth() { ... },
    nextMonth() { ... }, // 可以在这里添加控制上、下月切换的方法
  },
};
</script>

<style scoped>
.custom-header {
  /* 根据你的设计样式来编写 */
}
</style>

在这个示例中，我们创建了一个自定义的日历头部，包含上个月、当前月份和下个月的按钮。你需要根据实际需求修改样式并实现相应的方法来控制功能。