element UI 时间控件，限制新增时间范围

实现每次新增的时间段都不能和上次的时间段相同

<template>
  <div class="page_content">
    <h1 class="page_title">开始时间小于结束时间年月日</h1>
    <div>

      <div v-for="(item,index) in list" :key="index">
        当前下标：{{index}}
        当前限制范围：{{pickerOptionArr[index]}}
        <el-time-select v-model="item.data" :disabled="pickerOptionArr[index].disabled"
          :picker-options="pickerOptionArr[index]" placeholder="选择时间">
        </el-time-select>
        <el-time-select v-model="item.data2" :disabled="pickerOptionArr[index].disabled" :picker-options="{
          start:'00:00',
          step: '00:15',
          end:'24:00',
          minTime: item.data
        }" placeholder="选择时间">
        </el-time-select>
        <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>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [{
          data: ''
        }],
        pickerOptionArr: [{
          start: '00:00',
          step: '00:15',
          end: '24:00',
          disabled: false
        }]
      }
    },
    methods: {
      addDate(index) {
        let endDate = this.list[index].data2;//将上一行的结束时间设置为新增行的开始时间
        this.list.splice(index + 1, 0, { 'data': '', 'data2': '' });//新增一条数据
        this.pickerOptionArr.splice(index, 0, { 'start': endDate, "step": '00:15', 'end': '24:00', "disabled": "true" });
        this.pickerOptionArr.splice(index + 1, 0, { 'start': endDate, "step": '00:15', 'end': '24:00' });//新增一条规则
        console.log(this.list)
        console.log(this.pickerOptionArr)
      },
      deleteDate(index) {
        this.list.splice(index, 1);
        this.pickerOptionArr.splice(index, 1);
      },
    }
  };
</script>
<style>
</style>

效果图