用ant-design-vue的日历Calendar组件来遍历数组到每个不同的日期格子上

我们看官方文档的Calendar组件是通过switch来将数据渲染到每日的格子上的，可是我却发现这个渲染会使得每个月的同一天都会出现这种情况，case：1则每个月的1日都会有数据渲染上去。

那么我就想通过导入一个数组就可以实现每日的格子数据渲染，那么我们就得了解Calendar渲染到每个日期格子的原理。

首先它是通过v-for遍历到每个日期格子的。

<li v-for="item in getListData(value)" :key="item.content">

如上，主要看getListData（value）实现效果渲染。那么我们就可以通过改变这个方法来完成我们想要的效果。

//数组格式如下所示，因此我们可以在数据库这样写入每日的内容，date对应那一天，listData对应具体内容，包含的type为内容提示，content为文字。
testList: [
        {
          date: "2020-12-01",
          listData: [
            { type: "warning", content: "This is warning event." },
            { type: "success", content: "This is usual event." },
            { type: "error", content: "This is error event." },
          ],
        },
        {
          date: "2020-12-05",
          listData: [{ type: "warning", content: "This is warning event." }],
        },
        {
          date: "2020-12-08",
          listData: [
            { type: "warning", content: "This is warning event." },
            { type: "error", content: "This is error event." },
          ],
        },
      ],


getListData(value) {
      let listData;
      //遍历数组
      this.testList.forEach(e => {
      //让数组的date与遍历到日历的那天的日期值相匹配
        if (e.date === value.format("YYYY-MM-DD")) {
          listData = e.listData;
        }
      });
      return listData || [];
    },

通过这个方法渲染出来的日历内容就不会像例子那样每月同一日重复了，而且直接导入一个数组即可。