Vue Element UI Calendar 自定义日期单元格内容

Vue Element UI Calendar 自定义显示内容

使用 Element UI 的 <el-calendar> 组件时，可以通过 <template #date-cell='{ date }'> 来自定义日期单元格的内容。

常见错误及解决方案：

1. 确保已正确引入 <el-calendar> 组件和相关依赖。
2. <template #date-cell='{ date }'> 是 Vue 3 中的语法，如果你使用的是 Vue 2，请使用 <template v-slot:date-cell='{ date }'>。
3. 确保在 <el-calendar> 组件中使用了 v-model 指令绑定了一个响应式的变量，例如：

<template>
  <el-calendar v-model='selectedDate'>
    <template #date-cell='{ date }'>
      <!-- 这里是自定义的显示内容 -->
      <div>{{ date }}</div>
    </template>
  </el-calendar>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null
    };
  }
};
</script>

以上代码中，selectedDate 是一个响应式变量，可以通过 v-model 指令进行双向绑定。在 <template #date-cell='{ date }'> 中，我们可以根据 date 的值来自定义日期单元格的显示内容。