基于element ui的Calendar实现添加自定义内容

目标

实现的内容是在Element UI的 Calenda 中可以自己添加内容

官方文档

通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。

自定义要改的内容

直接看下面code

1. value的值是选中月份的值
2. calendarData中的每一对象的dutyDate的格式是2021-01-20
3. 主要方法handleAddClick，handleEventClick
4. 用户信息格式：

 {
            "id": 14,
            "loginName": "nige",
            "userName": "倪割",
            "ding_user_id": "23123123"
        },

以下为完整代码：

<template>
  <div id="app">
    <div class="search-container">
      <div class="search-item-container">

        <el-dropdown trigger="click">
          <el-button plain>
            产品:{
   {
    productList.find(o=>o.key===product).name
            }}
            <i
              class="el-icon-caret-bottom el-icon--right"
            />
          </el-button>
          <el-dropdown-menu slot="dropdown" class="no-border">
            <el-radio-group v-model="product" style="padding: 5px 15px;">
              <el-radio
                v-for="item in productList"
                :key="item.key"
                :value="item.key"
                :label="item.key"
              >{
   {
    item.name }}</el-radio>
            </el-radio-group>
          </el-dropdown-menu>
        </el-dropdown>

        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="getCalendarData()"
        >{
   {
    $t('table.search') }}</el-button>
      </div>
    </div>
    <el-aside direction="horizontal" style="margin-left:10px;padding-right:10px;background-color:skyblue" width="100%">
      您可以直接在以下日历中点击<b style="background-color:rgb(163, 241, 238);">日期</b> 添加值班人员；点击 <b style="color: #f8a535;">名字</b> 修改值班人员。
    </el-aside>
  <!--value的值是选中月份的值 -->
    <el-calendar id="calendar" v-model="value">
      <template slot="dateCell" slot-scope="{date, data}">
        <!--自定义内容 item.dutyDate的格式是2021-01-20,-->
        <div @click="handleAddClick(data)">
          <div class="calendar-day">{
   {
    data.day.split('-').slice(2).join('-') }}</div>
          <div v-for="(item,index) in calendarData" :key