Element-UI MCP Server

## Calendar 日历 显示日期 ### 基本 :::demo 设置 `value` 来指定当前显示的月份。如果 `value` 未指定，则显示当月。`value` 支持 `v-model` 双向绑定。 ```html <el-calendar v-model="value"> </el-calendar> <script> export default { data() { return { value: new Date() } } } </script> ``` ::: ### 自定义内容 :::demo 通过设置名为 `dateCell` 的 `scoped-slot` 来自定义日历单元格中显示的内容。在 `scoped-slot` 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。 ```html <el-calendar> <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--> <template slot="dateCell" slot-scope="{date, data}"> <p :class="data.isSelected ? 'is-selected' : ''"> {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}} </p> </template> </el-calendar> <style> .is-selected { color: #1989FA; } </style> ``` ::: ### 自定义范围 :::demo 设置 `range` 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。 ```html <el-calendar :range="['2019-03-04', '2019-03-24']"> </el-calendar> ``` ::: | 参数 | 说明 | 类型 | 可选值 | 默认值 | |-----------------|-------------- |---------- |------------ |-------- | | date | 单元格代表的日期 | Date | — | — | | data | { type, isSelected, day}，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd | Object | — | — |