element-ui日历组建-待办事项

<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-calendar v-model="calendarValue">
      <template slot="dateCell" slot-scope="{date, data}">
        <div :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }}
          <div v-for="item in calendarList" :key="item.index">
               <span v-if="item.date == data.day.split('-').slice(1).join('-')">
                 {{item.name}} ✔️
               </span>
          </div>
        </div>
      </template>
    </el-calendar>

  </el-card>
</template>

<script>
  export default {
    props: {

    },
    data() {
      return {
        calendarValue: "03-03",
        calendarList:[
          {
            name:"休息",
            date:"03-03"
          },
          {
            name:"上班",
            date:"03-04",
          },
        ],
      };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {
    },
    methods: {
    },
    components: {},
  };
</script>

<style scoped lang="scss">
  .is-selected {
    color: #1989FA;
  }

  .item_config {
    background-color: #000;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 10px;

    ._key {
      float: left;
      width: 70px;
      text-align: right
    }

    ._value {
      width: 100%;
      padding-left: 80px;
      text-align: left;

    }
  }
</style>