Element 中el-calendar取消点击事件

style="pointer-events:none"

<template>
    <div class="app-container">
        <div class="calendar-box">
            <div v-if="tableData.length">
                <el-calendar
                    :key="index"
                    v-model="item.month"
                    style="pointer-events: none"
                    v-for="(item, index) in tableData">
                    <template slot="dateCell" slot-scope="obj">
                        <!-- 当前充值有数据 && 当前时期包含当前月 -->
                        <div v-if="dealMyDate(obj.data.day, 'recharge') !='no data' && obj.data.day.indexOf(item.month) != -1">
                            <p class="date">{{ obj.data.day }}</p>
                            <div>
                                <div class="text">
                                    <span>充值：</span>
                                    <span style="color: red">
                                        {{dealMyDate(obj.data.day, "recharge")}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-calendar>
            </div>

            <div v-if="tableData.length == 0" class="empty-box">
                <span>*暂无数据</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "yearInfo",
    data() {
        return {
            // 日历数据
            tableData: [
                {
                    month: "2021-02",
                    data: [
                        { pay_day: "2021-02-23", recharge: 150111.9 },
                        { pay_day: "2021-02-22", recharge: 151495.25 },
                        { pay_day: "2021-02-21", recharge: 147798.82 },
                        { pay_day: "2021-02-20", recharge: 144768.89 },
                        { pay_day: "2021-02-19", recharge: 132939.74 },
                        { pay_day: "2021-02-18", recharge: 144205.75 },
                        { pay_day: "2021-02-17", recharge: 157831.3 },
                        { pay_day: "2021-02-16", recharge: 164209.91 },
                        { pay_day: "2021-02-15", recharge: 162360.63 },
                        { pay_day: "2021-02-14", recharge: 155335.99 },
                        { pay_day: "2021-02-13", recharge: 135879.07 },
                        { pay_day: "2021-02-12", recharge: 144747.51 },
                        { pay_day: "2021-02-11", recharge: 135996.91 },
                        { pay_day: "2021-02-10", recharge: 173791.11 },
                        { pay_day: "2021-02-09", recharge: 167305.69 },
                        { pay_day: "2021-02-08", recharge: 154027.58 },
                        { pay_day: "2021-02-07", recharge: 158386.29 },
                        { pay_day: "2021-02-06", recharge: 148546.13 },
                        { pay_day: "2021-02-05", recharge: 156863.22 },
                        { pay_day: "2021-02-04", recharge: 162191.6 },
                        { pay_day: "2021-02-03", recharge: 167969.12 },
                        { pay_day: "2021-02-02", recharge: 180191.8 },
                        { pay_day: "2021-02-01", recharge: 183623.49 },
                    ],
                },

                {
                    month: "2021-01",
                    data: [
                        { pay_day: "2021-01-31", recharge: 182827.6 },
                        { pay_day: "2021-01-30", recharge: 181814.11 },
                        { pay_day: "2021-01-29", recharge: 188250.88 },
                        { pay_day: "2021-01-28", recharge: 202600.94 },
                        { pay_day: "2021-01-27", recharge: 208388.44 },
                        { pay_day: "2021-01-26", recharge: 218173.79 },
                        { pay_day: "2021-01-25", recharge: 227559.46 },
                        { pay_day: "2021-01-24", recharge: 231411.85 },
                        { pay_day: "2021-01-23", recharge: 236331.7 },
                        { pay_day: "2021-01-22", recharge: 238551.57 },
                        { pay_day: "2021-01-21", recharge: 244934.91 },
                        { pay_day: "2021-01-20", recharge: 270507.93 },
                        { pay_day: "2021-01-19", recharge: 251012.55 },
                        { pay_day: "2021-01-18", recharge: 292747.74 },
                        { pay_day: "2021-01-17", recharge: 350482.08 },
                        { pay_day: "2021-01-16", recharge: 342121.01 },
                        { pay_day: "2021-01-15", recharge: 342837.41 },
                        { pay_day: "2021-01-14", recharge: 354191.11 },
                        { pay_day: "2021-01-13", recharge: 361030.56 },
                        { pay_day: "2021-01-12", recharge: 327212.22 },
                        { pay_day: "2021-01-11", recharge: 328230.3 },
                        { pay_day: "2021-01-10", recharge: 322713.18 },
                        { pay_day: "2021-01-09", recharge: 307293.19 },
                        { pay_day: "2021-01-08", recharge: 302455.01 },
                        { pay_day: "2021-01-07", recharge: 303086.22 },
                        { pay_day: "2021-01-06", recharge: 299749.85 },
                        { pay_day: "2021-01-05", recharge: 303175.53 },
                        { pay_day: "2021-01-04", recharge: 307114.44 },
                        { pay_day: "2021-01-03", recharge: 308181.41 },
                        { pay_day: "2021-01-02", recharge: 292744.41 },
                        { pay_day: "2021-01-01", recharge: 318910.46 },
                    ],
                }
            ],
        };
    },

    methods: {
        // 日历数据处理方法
        dealMyDate(date, str) {
            let data = this.tableData;
            let result = "no data";
            for (let i = 0; i < data.length; i++) {
                let item = data[i];
                if (date.indexOf(item.month) != -1) {
                    let list = item.data;
                    for (let k = 0; k < list.length; k++) {
                        let obj = list[k];
                        if (obj.pay_day == date) {
                            result = obj[str];
                            break;
                        }
                    }
                }
            }
            return result;
        },
    },
};
</script>

<style lang="less" scoped>
.app-container {
    height: calc(100vh - 218px);
    overflow: hidden;
    min-width: 1100px;
    margin: 0;
    padding: 0;
    .calendar-box {
        height: calc(100vh - 218px);
        overflow: scroll;
        .empty-box {
            width: 100%;
            height: 100%;
            border: 1px solid #dfe6ec;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            span {
                color: red;
            }
        }
    }
}
</style>