element calendar+popover use

A recent project has been trying to achieve this effect:

 

 Above code:

<el-calendar>
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template slot="dateCell" slot-scope="{date, data}">
                <el-popover popper-class="popoverBackB" placement="top" width="300" trigger="click"
                    :ref="'popoverRef-' + data.day">
                    <el-form ref="form" :model="form" label-width="70px">
                        <el-form-item label="任务工作">
                            <el-input v-model="form.workArrangeName" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="填报时间">
                            <el-input v-model="form.fillDate" :disabled="true">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="执行状态">
                            <el-radio-group v-model="form.finishStatus">
                                <el-radio v-for="dict in finishStatusOptions" :key="dict.dictValue"
                                    :label="dict.dictValue">
                                    {
   
   { dict.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-check" type="primary" @click="onSubmit">保存</el-button>
                            <el-button @click="close(data.day)">取消</el-button>
                        </el-form-item>
                    </el-form>
                    <div slot="reference" class="calendar-item"
                        @click="calendarOnClick(data.day, dealMyDate(data.day))">
                        <span>{
   
   { data.day.split('-').slice(1).join('-') }}</span>
                        <div title="正常" class="cirle normal" v-if="dealMyDate(data.day).finishStatus == 0">
                        </div>
                        <div title="预警" class="cirle warning" v-if="dealMyDate(data.day).finishStatus == 1">
                        </div>
                        <div title="超期" class="cirle outday" v-if="dealMyDate(data.day).finishStatus == 2">
                        </div>
                        <div title="已完成" class="cirle finished" v-if="dealMyDate(data.day).finishStatus == 3">
                        </div>
                    </div>
                </el-popover>
            </template>
        </el-calendar>

//日期点击事件 
calendarOnClick(date, obj) {
            this.form.fillDate = date;
            if (obj.id != undefined) {
                this.form.id = obj.id;
                this.form.finishStatus = obj.finishStatus + "";
            } else {
                this.form.id = null;
                this.form.finishStatus = null;
            }
        },
//和业务数据比对，与日历上具体日期绑定
        dealMyDate(day) {
            let res = '';
            for (let index = 0; index < this.finishArr.length; index++) {
                var date = this.dayjs(this.finishArr[index].fillDate).format("YYYY-MM-DD");
                if (date == day) {
                    res = this.finishArr[index];
                    break;
                }
            }
            return res;
        },

I encountered a problem with the cancel button inside the popover. I didn’t know how to close it, so I found that the date can be separated in the ref, so I wrote this:

 <el-popover popper-class="popoverBackB" placement="top" width="300" trigger="click"
                    :ref="'popoverRef-' + data.day">

Close method:

 close(date) {
            this.$refs['popoverRef-' + date].doClose();
        }