日历组件（el-calendar）禁用自定义日期范围

效果图：

项目要求：只能操作今日以及以前的日期

由于el-calendar组件未直接提供禁用属性和相关操作，所以实现起来稍微有点麻烦，通过阅读文档还好其提供了插槽（slot="dateCell"  slot-scope="{date, data}"），用气扩展可以实现想要的效果。

方案一：插槽中用el-button组件，借用其disable属性

代码实现（无需js操作）

      //vue模板
       <el-calendar class="calendar-style" v-model="rangeTime">
          <template slot="dateCell" slot-scope="{ date, data }">
            <el-button
              type="text"
              :disabled="date > new Date() ? true : false"
              >{{ data.day.split("-").slice(2).join("") }}</el-button
            >
          </template>
        </el-calendar>

       //样式（我这里按照ui图对日历每个小格的大小做了的调整）
        button {
          color: #666666;
        }
       //按钮大小需要调整成和日历点击小格子大小一样覆盖掉点击的小个子否则点击周围还会起点击作用
        button.is-disabled {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          color: #cccccc;
        }
        ::v-deep .el-calendar-day {
          padding: 0;
          height: 40px;
          width: 40px;
          line-height: 40px;
          text-align: center;
          border-radius: 50%;
        }

        ::v-deep .is-selected .el-calendar-day {
          button {
            color: #fff !important;
          }
          background-color: #2e77d9;
        }

方案二：禁用click操作，并用css样式修饰实现

代码实现（无需js操作）

        //vue模板
        <el-calendar
          class="calendar-style"
          v-model="rangeTime"
        >
          <template v-slot:dateCell="{ date }">
            //此处使用 @click.stop禁用点击操作
            <p
              v-if="date.getTime() > new Date().getTime() + 60 * 60 * 1000"
              class="disabled"
              @click.stop
            >
              {{ parseTime(date, "{d}") }}
            </p>
            <p class="notDisabled" v-else>{{ parseTime(date, "{d}") }}</p>
          </template>
        </el-calendar>
        //css样式
        ::v-deep .el-calendar-day {
          padding: 0;
          height: 40px;
          width: 40px;
          line-height: 40px;
          border-radius: 50%;
          p {
            margin: 0;
            padding: 0;
            width: 40px;
            height: 40px;
            min-width: 28px;
            line-height: 40px;
            text-align: center;
            color: #000;
            border-radius: 50%;
            font-size: 15px;
            // font-family: Barlow Condensed SemiBold;
            background-clip: content-box;
          }
           // 自定义禁用样式
          .disabled {
            cursor: not-allowed;
            color: #c0c4cc;
          }
        }
        ::v-deep .is-selected .el-calendar-day {
          p {
            background-color: #2e77d9;
            color: #fff;
          }
        }