antdesignvue日历控件使用

Question

问题遇到的现象和发生背景

刚入职一个小公司，老板让用jeecgboot做一个日历的功能，要求可以根据当前登录用户来查询数据库，在日历上显示出来某天的日程

问题相关代码，请勿粘贴截图

<template>
  <div>
    <a-calendar @panelChange="onPanelChange" @select="select">
      <ul slot="dateCellRender" slot-scope="value" class="events">
        <li v-for="item in getListData(value)" :key="item.content" style="list-style: none;">
          <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>任务数量</span>
        </div>
      </template>
    </a-calendar>
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    data() {
      return {
        testList: [
          {
            date: "2022-01-13",
            listData: [
              { type: "warning", content: "This is warning event." },
              { type: "success", content: "This is usual event." },
              { type: "error", content: "This is error event." },
            ],
          },
          {
            date: "2022-01-14",
            listData: [
              { type: "warning", content: "This is warning event." },
              { type: "success", content: "This is error event." },
            ],
          },
          {
            date: "2022-01-15",
            listData: [
              { type: "warning", content: "This is warning event." },
              { type: "error", content: "This is error event." },
            ],
          },
        ],
      };
    },
    methods: {
      getListData(value) {
        let listData;
        //遍历数组
        this.testList.forEach((e) => {
          //让数组的date与遍历到日历的那天的日期值相匹配
          if (e.date === value.format("YYYY-MM-DD")) {
            listData = e.listData;
          }
        });
        return listData || [];
      },
      // 日期面板变化
      onPanelChange(value, mode) {
        console.log(value, mode);
      },
      // 点击选择日期
      select(value) {
        console.log(value);
        console.log(moment(value).format('YYYY-MM-DD'));
      },

      // 获取相同项为新数组
      dataDeal(data){
        var listArr = [];
        data.forEach(function(item, index) {
          for(var i = 0; i < listArr.length; i++){
            // 对比相同的字段key，相同放入对应的数组
            if(listArr[i].date === item.date){
              listArr[i].listInfo.push({
                num: item.num
              });
              return;
            }
          }
          // 第一次对比没有参照，放入参照
          listArr.push({
            date: item.date,
            listInfo: [{
              num: item.num
            }]
          });
        });
        listArr.forEach(item => {
          let sum = 0
          item.listInfo.forEach(items => {
            sum += items.num
            item.sum = sum
          });
        });
        return listArr;
      },
      // 月份面板显示内容
      getMonthData(value) {
        let num = 0
        let arr = []
        this.testList.forEach((item, index) => {
          let obj = { date: moment(item.date).format('M') - 1, num: item.listData.length }
          arr.push(obj)
        });
        arr = this.dataDeal(arr)
        arr.forEach(item => {
          if (value.month() === item.date) {
            num = item.sum
          }
        })
        return num ? num : ''
      }
    },
  };
</script>

<style scoped lang="less">
  .events {
    padding-left: 20px;
  }
</style>

运行结果及报错内容

这是我在网上找的ant design vue 日历组件现在可以在前端展示出来死数据。但是我不知道怎么样可以把teslist里面的数据替换成数据库里的数据。

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1