el-calendar 实现自定义日辰

el-calendar 是一个基于 Vue.js 的日历组件，它提供了丰富的配置选项，可以轻松地实现自定义日辰。以下是一些实现自定义日辰的方法：

1. 通过设置 slot

el-calendar 组件为每个日期单元格提供了一个 slot，可以通过设置 slot 来自定义单元格的内容。下面是一个示例代码：

<el-calendar :range-start="start" :range-end="end" :first-day-of-week="1" @change="handleChange">
    <template #date="{ date }">
        <div class="custom-cell">
            <span class="date">{{ date.date }}</span>
            <span class="solar-term">{{ date.solarTerm | default '无' }}</span>
        </div>
    </template>
</el-calendar>

在上面的代码中，我们通过设置名为 date 的 slot 来自定义日期单元格，其中 date 是一个对象，包含日期信息和农历信息。在 slot 内部，我们可以使用这些信息来渲染自定义内容。

2. 通过设置 dateCellRender 属性

el-calendar 组件还提供了一个 dateCellRender 属性，可以用于自定义日期单元格的渲染函数。下面是一个示例代码：

<el-calendar :range-start="start" :range-end="end" :first-day-of-week="1" :date-cell-render="renderCell" @change="handleChange"></el-calendar>

在上面的代码中，我们将 dateCellRender 属性设置为一个函数 renderCell，该函数接受一个参数 date，表示当前日期的信息。在函数内部，我们可以根据需要渲染自定义内容，并返回一个 Vue 组件或者 HTML 字符串。

methods: {
    renderCell(date) {
        return {
            template: `
                <div class="custom-cell">
                    <span class="date">{{ date.date }}</span>
                    <span class="solar-term">{{ date.solarTerm | default '无' }}</span>
                </div>
            `
        };
    },
    //...
}

在上面的代码中，我们返回了一个包含自定义 HTML 的 Vue 组件，这个组件将会被渲染到日期单元格中。在组件内部，我们可以使用 date 参数来访问日期信息和农历信息。