antd日历实现待办标记

最新推荐文章于 2024-08-07 16:39:34 发布

头发还有嘛

最新推荐文章于 2024-08-07 16:39:34 发布

阅读量865

点赞数 3

文章标签：大数据

本文链接：https://blog.csdn.net/SuMakabaka/article/details/125680455

版权

A-Calendar 事件渲染日期匹配插槽事件处理

关键词由CSDN通过智能技术生成

<a-calendar :fullscreen="false" :header-render="headerRender" @panelChange="onPanelChange" @select="onSelect">
                  <ul slot="dateCellRender" slot-scope="value" class="events">
                    <li v-for="item in getListData(value)" :key="item.content">
                      <a-badge :status="item.type" :number-style="{float:'right',marginTop:'-50px',marginRight:'-13px'}" />
                    </li>
                  </ul>
                </a-calendar>

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

.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;
  }

ps：（数据格式）

[
                {
                  date: "2022-07-11",
                  listData: [{ type: "warning" }],
                },
                {
                  date: "2022-07-05",
                  listData: [{ type: "warning"}],
                },
                {
                  date: "2022-07-08",
                   listData: [{ type: "warning"}],
                },
              ],