需求
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>