ant Calendar --vue使用记录

<template>
  <div>
      <a-calendar :defaultValue="currentTime" @select="onSelectFn" @panelChange="onPanelChangeFn">
        <ul slot="dateCellRender" slot-scope="value" class="events">
          <li v-for="item in getListData(value)" :key="item.content">
            <a-badge :status="item.type" :text="item.content" />
          </li>
        </ul>
        <template slot="monthCellRender" slot-scope="value">
          <div v-if="getMonthData(value)" class="notes-month">
            <section>{{ getMonthData(value) }}</section>
            <span>Backlog number</span>
          </div>
        </template>
      </a-calendar>
      
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      currentTime: moment(), //当前时间，日历是需要moment
      returndata: [
        {
          data: "2021-11-25",
          listData: [
            { type: "warning", content: "这是一个经过" },
            { type: "warning", content: "这是一个警告2" },
            { type: "warning", content: "这是一个经过3" },
          ],
        },
        {
          data: "2021-11-28",
          listData: [
            { type: "success", content: "123456798" },
            { type: "success", content: "8888" },
            { type: "success", content: "6666" },
          ],
        },
      ],
    };
  },
  methods: {
    onSelectFn(value){
      //实际使用可能会需要获取最新数据。
      // console.log(value.format('YYYY-MM-DD'),"aaaa")
    },
    onPanelChangeFn(value){
      // console.log(value,"bbbb")
    },
    getListData(value) {
      // console.log(value.format('YYYY-MM-DD'))
      // moment.js 时间格式化
      // moment.date()==>日
      // moment.format('YYYY-MM-DD')==>转为年月日的格式
      // 参考https://www.cnblogs.com/zhang1f/p/14573552.html
      let listData;
      this.returndata.forEach((item) => {
        if (item.data == value.format("YYYY-MM-DD")) {
          listData=item.listData;
        }
      });
      return listData || [];
    },

    getMonthData(value) {
      if (value.month() === 8) {
        return 1394;
      }
    },
  },
  mounted() {},
};
</script>

<style>
</style>

默认选中当天时间，展示的是returndata里面的数据，使用时可获取后端返回数据，格式也可根据需求更换。上述代码展示图如下：