element的日历组件自定义日历头部应该如何使用

如果你想要使用 Element 的日历组件，自定义日历头部，可以通过使用 scoped slot 来实现。

首先，在 el-calendar 组件的标签上添加 scoped-slot 属性，值为 header，示例代码如下：

<el-calendar
  v-model="date"
  :first-day-of-week="1"
  :scopedSlots="{
    header: 'custom-header'
  }"
></el-calendar>

然后，在 Vue 的模板中定义一个名为 custom-header 的 slot，来自定义日历头部的内容，示例代码如下：

<template>
  <div class="custom-header">
    <span>{{ year }}</span>
    <span>/</span>
    <span>{{ month }}</span>
  </div>
</template>

<script>
export default {
  props: {
    year: {
      type: Number,
      default: 2021
    },
    month: {
      type: Number,
      default: 1
    }
  }
}
</script>

最后，在 Vue 的实例中，定义一个方法，用来渲染自定义的日历头部内容，示例代码如下：

methods: {
  customHeader({ year, month }) {
    return {
      year,
      month
    };
  }
}

这样，你就可以自定义 Element 的日历组件的日历头部了。