element-ui 日历组件的使用

效果图

实现代码

<template>
  <el-calendar id="calendar">
    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
    <template
      slot="dateCell"
      slot-scope="{date, data}">
      <!--自定义内容-->
      <div>
        <div class="calendar-day" style="text-align: center">
          <el-tooltip v-if="brightDate.indexOf(data.day) != -1" class="item" effect="dark" :content="content(data.day)" placement="right">
            <span class="everyDay">{{ data.day.split('-').slice(2).join('-') }}</span>
          </el-tooltip>
          <span v-else>{{ data.day.split('-').slice(2).join('-') }}</span>
        </div>
      </div>
    </template>
  </el-calendar>
</template>
<script>
export default {
  data () {
    return {
      calendarData: [
        {
          'caseNum': '2-1832',
          'judgeName': '林霞',
          'caseNo': null,
          'confirmOpen': null,
          'newly': true,
          'scheduldingId': 'ff8080817153174f0171536dcaee0069',
          'isOpen': false,
          'progress': 7,
          'lawCaseId': 'ff8080817153174f0171536dbea2005a',
          'tribunalName': '第一审判法庭',
          'state': 0,
          'startDate': '2020-04-23',
          'judgeId': '00109'
        },
        {
          'caseNum': '2-1832',
          'judgeName': '林霞',
          'caseNo': null,
          'confirmOpen': null,
          'newly': true,
          'scheduldingId': 'ff8080817153174f0171536dcaee0069',
          'isOpen': false,
          'progress': 7,
          'lawCaseId': 'ff8080817153174f0171536dbea2005a',
          'tribunalName': '第二审判法庭',
          'state': 0,
          'startDate': '2020-04-01',
          'judgeId': '00109'
        }
      ],
      value: new Date()
    }
  },
  computed: {
    // 时间高亮的数组
    brightDate () {
      let ary = []
      for (let i in this.calendarData) {
        ary.push(this.calendarData[i].startDate)
      }
      return ary
    }
  },
  methods: {
    // Tooltip 文字提示
    content (date) {
      let content = ''
      for (let i in this.calendarData) {
        if (date === this.calendarData[i].startDate) {
          content = this.calendarData[i].judgeName + ` ` + this.calendarData[i].tribunalName
        }
      }
      return content
    }
  }
}
</script>
<style scoped>
.everyDay {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #409eff;
  color: #fff;
  border-radius: 50%;
}
</style>