Vue中使用elementUI 设置多段datepicker的禁用日期disabledDate

借鉴原文：elementUI 动态设置datepicker的禁用日期disabledDate - 简书 (jianshu.com)

项目有个需求， 选择日期只能选择接口返回的时间，根据接口返回的日期判断哪些日期可选。 时间也要可以选择，以下

<template>
    <div>
        <el-date-picker
            :picker-options="pickerOptions"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm"
            range-separator="→"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 350px"
            v-model="selectObj.timeSel"
            @change="timeSelChange"
            :disabled="dateDisabled"
            class="upperEv"
          >
          </el-date-picker>
      </div>
</template>
<script>
    computed:{
        pickerOptions(){ // 日期选择器限制
          // 获取到Vue示例指向
          let self = this
              // disabledDate接收一个boolen值，具体可看elementUi官方文档
            return{ disabledDate(time){ // 返回date面板时间不等于接口拿到的时间
              let flag
              let tArr = []
              // self.spreadTab.spreadTabData 接口拿到的数据
              self.spreadTab.spreadTabData.forEach(item => {
                  //为了判断先转为同种类型值再做判断
                  // 将时间格式统一为当天日期，不要时间，表示当天的所有时间都可以选择
                  // 如果想限制时间的话，将格式转为 .format("YYYY-MM-DD HH:mm:ss")就可以限制可选的具体时间
                 
                 //使用moment中的startOf和endOf获取到当天的0时与24时
                 // flag取其区间，时间也可以选择了，
                let startTX = moment(item.month).startOf('day').format("YYYY-MM-DD HH:mm:ss")
                let endTX = moment(item.month).endOf('day').format("YYYY-MM-DD HH:mm:ss")
                tArr.push(
                  {
                  // 转为时间戳方便比较
                    startT:moment(startTX).format("x"),
                    endT:moment(endTX).format("x"),
                  }  
                 )
              })
              // 使用som遍历每一项，取其区间值，这区间的时间我们都可以选择
              flag = tArr.some((item) => item.startT <= time.getTime() && item.endT >= time.getTime())
              return !flag
            },
          }
        },
        },
</script>

一开始也是没头绪， 找了一些案例，但是都不符合需求。改之后成功满足需求