Element中的日历组件默认是有一个点击事件的，点击某一天，当前日历的日期会动态发生变化，相当于是在有限的表格内通过点击事件显示更多的日期，但是有时候我们并不想要这个点击事件，为了方便进行对比分析，想直接展示多个月的数据，那该怎么做呢？直接在日历组件上加上如下设置，就可以取消点击事件了。
代码语言：javascript复制style="pointer-events:none"以下是代码示例：
代码语言：javascript复制<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>
