vue：el-date-picker多个日期遍历，不能选择重叠日期（element-ui）

效果如图： 样式就忽略哈

 代码：

html：

<div v-for="(item,index) in list" :key="index">
      <el-date-picker style="width:235px" unlink-panels :clearable="false" :picker-options="pickerOptionArr[index]" v-model="item.data" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-button size="mini" style="margin-left:5px" icon="el-icon-minus" v-if="list.length > 1" @click="deleteDate(index)"></el-button>
      <el-button size="mini" style="margin-left:0px" type="success" icon="el-icon-plus" :disabled="!item.data" v-if="index == list.length - 1" @click="addDate(index)"></el-button>
</div>

js：

data() {
    return {
      list:[{
        data:''
      }],
      pickerOptionArr: [{}],
    }
},
methods:{
    addDate(index) {
      let _this = this;
      let endDate = _this.list[index].data[1];

      this.pickerOptionArr.splice(index + 1, 0, {
        disabledDate: (time) => {
          if (endDate) return time.getTime() < new Date(endDate).getTime() -86400000; // -86400000是可以取当天日期,当天不允许重叠的话可以去掉
        }
      })
      this.list.splice(index + 1, 0, { 'data': '', 'status': '' });
    },

    deleteDate(index) {
      let len = this.list.length;
      // 当长度小于3时忽视
      if (index == (len - 2) && len > 2) { // 删除倒数第二条
        if (!this.list[len - 1].data) { // 且最后一条没数据 则需要给倒数第二条加disabledDate 默认是无disabledDate
          let endDate = this.list[index-1].data[1];
          this.pickerOptionArr[len - 2] = {
            disabledDate: (time) => {
              if (endDate) return time.getTime() < new Date(endDate).getTime() -86400000; // -86400000是可以取当天日期,当天不允许重叠的话可以去掉
            }
          }
        }
      }
      // 添加完规则后再删除数据
      if (index == 0 ) {
        this.pickerOptionArr.shift(); // 首条数据删除 后面数据的规则不变
      } else {
        this.pickerOptionArr.pop(); // 其他位置数据删除，后面数据的规则往前移一条
      }
      this.list.splice(index, 1);
    },
}

 

不知道逻辑有没有写复杂=。=反正这样写目前没发现bug

有问题欢迎指出~