vue2使用ant自带的日历组件，页面展示空白

Question

vue2使用ant自带的日历组件，页面展示空白

<template>
  <a-calendar>
    <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>
</template>
<script>
export default {
  methods: {
    getListData(value) {
      let listData;
      switch (value.date()) {
        case 8:
          listData = [
            { type: 'warning', content: 'This is warning event.' },
            { type: 'success', content: 'This is usual event.' },
          ];
          break;
        case 10:
          listData = [
            { type: 'warning', content: 'This is warning event.' },
            { type: 'success', content: 'This is usual event.' },
            { type: 'error', content: 'This is error event.' },
          ];
          break;
        case 15:
          listData = [
            { type: 'warning', content: 'This is warning event' },
            { type: 'success', content: 'This is very long usual event。。....' },
            { type: 'error', content: 'This is error event 1.' },
            { type: 'error', content: 'This is error event 2.' },
            { type: 'error', content: 'This is error event 3.' },
            { type: 'error', content: 'This is error event 4.' },
          ];
          break;
        default:
      }
      return listData || [];
    },

    getMonthData(value) {
      if (value.month() === 8) {
        return 1394;
      }
    },
  },
};
</script>
<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>

Answer 1

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7466626
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue如何引入ant部分组件
• 除此之外, 这篇博客: vue-antd对表单的简单封装中的 使用示例 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• <!-- 运维配置表单 -->
  <easy-model-form
    :form-config="peonForm"
    ref="peonForm"
    @submit="submit"
  />
  
  // 可以调整这里的属性来进行配置
  const PEON_FORM = [
    {
      name: 'id',
      nameCn: 'id',
      disabled: true
    }, {
      name: 'tenant_id',
      nameCn: '租户id',
      disabled: true
    }, {
      name: 'peon_url',
      nameCn: 'peon_url',
      disabled: false
    }
  ];
  data() {
    return {
      peonForm: {
          name: '运维配置表单',
          item: PEON_FORM
      }
    }
  }
  
  // 打开表单
  this.$refs.peonForm.handleOpenForm(res.data);