element ui 日历组件禁选某些日期

需求

1、后端返回一组日期，只有这些日期可以在日历进行点击

2、返回的日期中，如果属于过去的日期，也是要禁选掉

利用到的属性:

三元判断

includes（）是否含有某个字段

new Date()获取当天日期

利用组件内的属性

dateCell scoped slot 参数

参数	说明	类型	可选值	默认值
date	单元格代表的日期	Date	—	—
data	{ type, isSelected, day}，type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd	Object	—	—

使用组件内的自定义内容，利用button按钮的属性

<el-calendar>
  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
  <template
    slot="dateCell"
    slot-scope="{date, data}">
            <el-button
                type="text"
                :style="
                  (数组.includes(data.day) &&
                    date > new Date()) ||
                  (data.day == 处理过的今天日期 && 数组.includes(newDate))
                    ? 'width: 100%; height: 100%; color: #000;'  （字体变黑）
                    : 'width: 100%; height: 100%; color: #ccc;'  （字体变灰，禁选的颜色）
                "
                :disabled="
                  (数组.includes(data.day) &&
                    date > new Date()) ||
                  (data.day == 处理过的今天日期（格式为2022-06-13） && 数组.includes(newDate))
                    ? false
                    : true
                "
                @click="getDateBtn(data.day)"
                >{{ data.day.split("-").slice(2).join("") }}（备注：这里只显示年月日中的日）</el-button
              >
  </template>
</el-calendar>