2021-07-02

element  日历  el-calendar添加自定义内容、给上个月，今天、下个月添加事件

例如：

html:
 <el-calendar v-model="month">

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

            <div class="notime">

                 <!-- 表格中显示日期 -->

                <div class="calendar-day">

                    {{data.day.split('-').slice(1).join('-')}}</div>

                <div v-for="(item,index) in inData" :key="index">

                     <!-- 判断数据显示日期 -->

                    <div v-if="(item.date).includes(data.day)">

                        <div class="is-selected" slot="reference">

                            <span class="is-selected1" style="color: #409eff;">进料：{{ item.total_weight}}kg</span>

                        </div>

                    </div>

                </div>

            </div>

        </template>

    </el-calendar>

js:

 this.$nextTick(() => {

                // 上一个月

                let prevBtn = document.querySelector(

                    ".el-calendar__button-group .el-button-group>button:nth-child(1)"

                );

                prevBtn.addEventListener("click", e => {

                      //this.month  时间，转化一下

                      //例： this.month = this.timeFormat(this.month);   this.month则为上个月时间,格式为2021-6

                       //业务代码

                });

                //下一个月

                let nextBtn = document.querySelector(

                    ".el-calendar__button-group .el-button-group>button:nth-child(3)"

                );

                nextBtn.addEventListener("click", () => {

                       //this.month  时间，转化一下

                        //业务代码

                });

                //今天

                let todayBtn = document.querySelector(

                    ".el-calendar__button-group .el-button-group>button:nth-child(2)"

                );

                todayBtn.addEventListener("click", () => {

                      //this.month  时间，转化一下

                       //业务代码

                });

            });

时间转化：

 timeFormat(date) {

                let year = date.getFullYear();

                let month = date.getMonth() + 1;

                return `${year}-${month}`

            },