vue+element日期选择，范围需要互斥

有这样一个需求，多条记录，每条日期的范围互斥，不能有重合

  

 <div style="max-height: 50vh;overflow: auto">
        <div style="text-align: right;margin-bottom: 1vh">
          <el-button type="primary"
                     @click="dutsformData.form.unshift({
              timeList:[],
              amount:''
            })">新增</el-button>
        </div>
        <el-form :model="dutsformData" label-width="100px" ref="dutsyForm"
                 :rules="rulesForm">
          <el-row style="background: #f5f5f6;padding-top: 2vh;border-radius: 0.5vh;margin-bottom: 2vh"
                  v-for="(item,index) in dutsformData.form" :key="index">
            <el-col :span="13">
              <el-form-item label="时间段" :prop="'form.'+index+'.timeList'" :rules="rulesForm.timeList">
                <el-date-picker
                    style="width: 100%"
                    v-model="item.timeList"
                    value-format="yyyy-MM"
                    format="yyyy-MM"
                    type="monthrange"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    :picker-options="pickerdustOptions"
                    @focus="changetime(index)"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="缴费金额" :prop="'form.'+index+'.amount'" :rules="rulesForm.amount">
                <el-input style="width: 100%;" v-model="item.amount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="padding-top: 0.8vh">
              <el-button type="primary" icon="el-icon-minus" circle size="mini"
              @click="dutsformData.form.splice(index,1)" :disabled="dutsformData.form.length===1"></el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="padding-top: 2vh">
        <el-button type="primary" @click="dutsConfirm()" :loading="dustLoading">确定</el-button>
      </div>

 dutsformData: {
        form:[{
          timeList: '',
          amount: ''
        }]
      },
      rulesForm:{
        timeList:[{
          required: true,
          message: '请选择时间段',
          trigger: 'change',
        }],
        amount:[{
          required: true,
          message: '请输入缴费金额',
          trigger: 'blur',
        },]
      },
      maxDate:'',
      minDate :'',
      rangeList:[],
      minormax:null,
      dustLoading:false,


computed:{
    pickerdustOptions(){
      let that = this;
      return {
        disabledDate(time) {
          let disable = false
          that.rangeList.forEach(item=>{
            disable=disable||(time.getTime() < item[1]+ 2592000000*1 && time.getTime() > item[0]-2592000000)
          })
          return disable
        },
        onPick(selectTime){
          that.rangeList.forEach(item=>{
            let minDate=null
            let maxDate=null
            if(selectTime.minDate){
              minDate=selectTime.minDate.getTime()
            }
            if(selectTime.maxDate){
              maxDate=selectTime.maxDate.getTime()
            }
            if(item[1]>minDate&&item[0]<maxDate){
              that.$nextTick(()=>{
                that.dutsformData.form[that.minormax].timeList=''
              })
              this.$message({
                message: '时间段选择不可以重合',
                type: 'warning',
              })
              return false
            }
          })
        }
      }
    }
  },
methods: {
    changetime(index){
      this.minormax=index
      this.rangeList=[]
      this.dutsformData.form.forEach(res=>{
        let min=new Date(res.timeList[0]).getTime()
        let max=new Date(res.timeList[1]).getTime()
        if(min&&max){
          this.rangeList.push([min,max])
        }
      })
    },
}

 代码如上

解决思路：用日期控件的disabledDate来进行设置

将选过的日期时间段存到一个数组中，在函数中循环遍历，分别设置disabledDate

中间遇到一个问题，可以选择包含已选过的时间段，这样跟需求不一样

解决思路：用日期控件的onPick，判断如果包含已选过的时间段，则将本次选择的数据清空即可

简单记录一下