el-calender的自定义内容展示

项目是springCloud+vue，前端用的elementUI，有个需求是实现编辑界面字段值、列表数据、和日历的三方数据联动

下面是功能截图
输入框为el-input-number
列表为el-table 可编辑表格（插槽实现）

由于我的逻辑较多，整体代码在400行左右，所以这里只简化说明，大神请绕过，轻吐槽（个人学习vue才一个多月，很多组件的用法或者语法，都还不是很熟悉）
首先引入日历组件，我用的是插槽，日历中要显示自定义内容，还是要用插槽，用例链接elementUI-calender

<el-calendar>
  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
  <template
    slot="dateCell"
    slot-scope="{date, data}">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {
   {
    data.day.split('-').slice(1).join('-') }} {
   {
    data.isSelected ? '✔️' : ''}}
    </p>
  </template>
</el-calendar>
<style>
  .is-selected {
   
    color: #1989FA;
  }
</style>

项目中引入的日历组件

<template #calendarForm>
        <el-calendar v-model="value">
          <template slot="dateCell" slot-scope="{ date, data }">
          <!--用div的作用是点击单元格范围尽可能的大-->
            <div