el-date-picker,创建循环多条时间

<el-card>
      <div>
        <el-form ref="setForm" :model="setForm" :inline="true">
          <p class="setTitle">基础电信企业上报设置</p>
          <div class="navReporting">
            <p class="period">业务清单上报周期<span class="setError">{{ error1 }}</span></p>
            <div>
              <div v-for="(item, index) in setForm.formList" prop="formList" :key="index">
                <el-form-item class="sitem" label="" :rules="index == 0&&setForm.formList.length==1 ? noSetRules : setRules" :prop="'formList.'+index+'.time'">
                  <el-date-picker @change="(val)=>handleTime(val,index,'formList')" value-format="yyyy-MM-dd" v-model="item.time" type="daterange" range-separator="至" start-placeholder="开始年月日" end-placeholder="结束年月日">
                  </el-date-picker>
                </el-form-item>
                <el-button type="danger" size="medium" @click="deleteList(index)" v-if="index>0">删除</el-button>
              </div>
              <el-button size="medium" type="primary" @click="addList">增加一条</el-button>
            </div>
          </div>
        </el-form>
      </div>
      <div>
        <el-button class="btn" type="primary" @click="save()">保存</el-button>
        <el-button class="btn" type="info" @click="resetForm()">重置</el-button>
      </div>
    </el-card>

data() {
    return {
      error1: '',
      setForm: {
        formList: [
          {
            time: [],
            startTime: '',
            endTime: ''
          }
        ],
      },
      setRules: [{ required: true, trigger: 'change', message: '周期不能为空' }],
      noSetRules: []
    }
  },

getTime() {
      // 请求后端接口，数据回显到表格上
      getTime()
        .then(res => {
          if(res.data.formList&&res.data.formList.length>0) {
            this.setForm.formList = res.data.formList
            this.setForm.formList.map((item)=> {
              if(item.startTime) {
                item.time = []
                item.time.push(item.startTime)
                item.time.push(item.endTime)
                return item
              }
            })
          }
        })
        .catch(res => {
          this.$message.error(res.message);
        });
    },
    //判断几条时间是否有重复的时间
    checkIfRepeat(list) {
      if(this.setForm[list]&&this.setForm[list].length>1) {
        for(let i=0;i<this.setForm[list].length-1;i++) {
          for(let j =i+1; j<this.setForm[list].length;j++) {
            if(this.setForm[list][i].startTime <= this.setForm[list][j].endTime && this.setForm[list][i].endTime >= this.setForm[list][j].startTime){
              if(list == 'formList') {
                this.error1= '周期时间重复'
                return true
              }
            }
          }
        }
      }
    },
    //选择时间是给开始时间和结束时间赋值
    handleTime(val,index,list) {
      this.setForm[list][index].startTime = val[0];
      this.setForm[list][index].endTime = val[1];
    },
    save() {
      this.error1 = ''
      this.$refs.setForm.validate(valid => {
        if(valid) {
          if(!this.checkIfRepeat('formList')){
            updateTime(this.setForm).then(()=> {
              this.$message.success('保存成功');
            }).catch(res => {
              this.$message.error(res.message);
            })
          }
        }
      })
    },
    addList() {
      if(this.setForm.formList.length<20)
      this.setForm.formList.push({time: ''})
    },
    deleteList(index) {
      this.setForm.formList.splice(index,1)
    },
    resetForm() {
      this.setForm={formList: [
          {
            time: [],
            startTime: '',
            endTime: ''
          }
        ],
      }
      this.save();
    }