天天看点

ant中Calendar的深度使用(关于日期框的填充一些问题)

ant中Calendar的深度使用(关于日期框的填充一些问题)
ant中Calendar的深度使用(关于日期框的填充一些问题)

这个是ant中组件的使用方法,但是我们可以发现一个问题就是下个月份的08也出现了匹配的数据,所以如果要做到精准匹配的话,那么后端返回的日期一定要包含月份,去做比较,下面是我写的代码,因为数据比较复杂,处理的比较多,所以看比较就好

const getListData = (value: any) => {
    let listData: any = []
    for (var key in calendarData) {
    //这里的key是个日期,里面是数组,数据结构可以看下面的图片
      if (moment(value).format('YYYY-MM-DD') === key) {
      //就看上面的比较就好,下面是我过滤掉重复的type操作,跟我的需求有关,同样的类型只显示一个按钮
        calendarData[key]?.map((item: any) => {
          if (listData.length > 0) {
            listData?.map((item2: any) => {
              if (item2.type === item.type) {
              } else {
                listData.push({ type: item.type })
              }
            })
          } else {
            listData.push({ type: item.type })
          }
        })
      }
    }
    return listData || []
  }
           
ant中Calendar的深度使用(关于日期框的填充一些问题)

我这里拿的年月日作比较,数据就可以做到精准匹配了,这个数据的设计都改了几次,也许这还不是最终的结构,现在需求基本也能实现。

ant中Calendar的深度使用(关于日期框的填充一些问题)

继续阅读