結果圖：

1.首先去掉官方頭部

a> css去除：.el-calendar__header {display: none;}；

b>js去除： this.$el.querySelector('div.el-calendar__header').remove()；

2.通過js Date物件實現日期加/減 年/月操作更改日曆繫結值；

3.通過chageValue方法切換日曆；

程式碼如下：包含了日曆內部插槽實現部分功能，有需求自行更改

<el-calendar class="calendar-page-calendar" ref="calendar" v-model="calendarDate">

<template slot="dateCell" slot-scope="{data}">

<div class="calendar-cell" @click="clickDateCell(data)">

<div class="betweenCenter">

<span>

<i

v-if="data.isSelected"

class="el-icon-success"

:style="{color:daysData.get(data.day.split('-')[2]) > 50?'#29CC97':'#4C84FF'}"

></i>

</span>

<span>{{ parseInt(data.day.split('-').slice(2)) }}</span>

</div>

<div v-if="data.day.split('-')[1] == nowMonth">

<span>{{daysData.get(data.day.split('-')[2]) || 0}}%</span>

<el-progress

:percentage="daysData.get(data.day.split('-')[2])"

:stroke-width="3"

:show-text="false"

:color="daysData.get(data.day.split('-')[2]) > 50?'#29CC97':'#4C84FF'"

></el-progress>

</div>

</div>

</template>

</el-calendar>

js:

chageDate(e) {

switch (e) {

case 'previousYear':

this.calendarDate = new Date(this.calendarDate.setFullYear(this.calendarDate.getFullYear() - 1));

this.$refs.calendar.chageValue(this.calendarDate);

break;

case 'previousMonth':

this.calendarDate = new Date(this.calendarDate.setMonth(this.calendarDate.getMonth() - 1));

this.$refs.calendar.chageValue(this.calendarDate);

break;

case 'nextMonth':

this.calendarDate = new Date(this.calendarDate.setMonth(this.calendarDate.getMonth() + 1));

this.$refs.calendar.chageValue(this.calendarDate);

break;

case 'nextYear':

this.calendarDate = new Date(this.calendarDate.setFullYear(this.calendarDate.getFullYear() + 1));

this.$refs.calendar.chageValue(this.calendarDate);

break;

}

},

​