求element表格（table）如何实现开始时间不能大于结束时间

<el-table-column label="预计开始时间" width="180" align="center">
   <template slot-scope="cope">
     <el-date-picker v-model="cope.row.StartDate" 
                     type="date"     
                     @change="startTimeStatus(cope.row)" 
                     :picker-options="pickerOptionsStart" 
                     value-format="yyyy/MM/dd" 
                     placeholder="选择开始时间">
     </el-date-picker>
   </template>
</el-table-column>

<el-table-column label="预计完成时间" width="180" align="center">
   <template slot-scope="cope">
     <el-date-picker v-model="cope.row.EndDate" 
                     type="date"     
                     @change="endTimeStatus(cope.row)" 
                     :picker-options="pickerOptionsEnd" 
                     value-format="yyyy/MM/dd" 
                     placeholder="选择完成时间">
      </el-date-picker>
   </template>
</el-table-column>

<script>
    export default {
       data(){
            return {
                pickerOptionsStart: {
                    disabledDate: (time) => {
                      let endDateVal = this.overDate;
                      if (endDateVal) {
                        return time.getTime() > new Date(endDateVal).getTime();
                      }
                    },
                 },
                pickerOptionsEnd: {
                    disabledDate: (time) => {
                      let beginDateVal = this.createDate;
                      if (beginDateVal) {
                            return time.getTime() < new Date(beginDateVal).getTime();
                      }
                    },
                  },
              overDate: "",
              createDate: "",
            } 
        },
       methods:{
            // 时间开始选择器
            startTimeStatus: function (row) {
              this.createDate = row.StartDate;
            },
            // 时间结束选择器
            endTimeStatus: function (row) {
              this.overDate = row.EndDate;
            },
        }
    }
</script>

我是这样写的，但只能实现一行的，第二行选择开始时间会被第一行结束时间所限制，该怎么改写？

解决了，加个focus跟踪当前行内容就行了

<template>
    <el-table-column label="预计开始时间" width="180" align="center">
         <template slot-scope="cope">
              <el-date-picker v-model="cope.row.StartDate" 
                              type="date" 
                              @change="startTimeStatus(cope.row)"             
                              @focus="focusStartTime(cope.row)" 
                              :picker-options="pickerOptionsStart"                                
                              value-format="yyyy/MM/dd" 
                              placeholder="选择开始时间">
               </el-date-picker>
         </template>
    </el-table-column>
    <el-table-column label="预计完成时间" width="180" align="center">
         <template slot-scope="cope">
               <el-date-picker v-model="cope.row.EndDate" 
                               type="date" 
                               @change="endTimeStatus(cope.row)" 
                               @focus="focusEndTime(cope.row)" 
                               :picker-options="pickerOptionsEnd" 
                               value-format="yyyy/MM/dd" 
                               placeholder="选择完成时间">
               </el-date-picker>
         </template>
     </el-table-column>
<template>

export default {
    data{
        return {
            pickerOptionsStart: {
                disabledDate: (time) => {
                  let endDateVal = this.overDate;
                  if (endDateVal) {
                    return time.getTime() > new Date(endDateVal).getTime();
                  }
                },
              },
            pickerOptionsEnd: {
                disabledDate: (time) => {
                  let beginDateVal = this.createDate;
                  if (beginDateVal) {
                    return time.getTime() < new Date(beginDateVal).getTime();
                  }
                },
              },
            overDate: "",
            createDate: "",
        }    
    },
    methods:{
        // 时间开始选择器
            startTimeStatus(row){
              this.overDate = row.EndDate;
              this.createDate = row.StartDate;
            },
        //获取焦点后，开始/完成时间为当前行的开始/完成时间
            focusStartTime(row){
              this.overDate = row.EndDate;
              this.createDate = row.StartDate;
            },
        // 时间结束选择器
            endTimeStatus(row) {
              this.createDate = row.StartDate;
              this.overDate = row.EndDate;
            },
        //获取焦点后，开始/完成时间为当前行的开始/完成时间
            focusEndTime(row){
              this.overDate = row.EndDate;
              this.createDate = row.StartDate;
            },
        }
}

type="daterange" 不是默认有判断并且两个合成一个组件，你为什么要自己写两个

那第一行选择的时间，会被记录下来吧，可以借助数据来实现，data-picker change事件传当前行下标，然后循环数据当前行下标-1就是上一行，这样就可以了

一对开始结束时间选择要对应一对createDate和overDate

不能整个页面共用

如果开始结束时间必填的话，可以直接用一个选择框加is-range它里面自己有限制结束时间比开始大，

  methods:{
        // 时间开始选择器
            startTimeStatus: function (row) {
              var timestamp = parseInt(new Date(row.StartDate).getTime()/1000);
              let endDateVal = this.overDate;
              if(timestamp<new Date(endDateVal).getTime()){
                  this.createDate = row.StartDate;
              }else{
                  alert("开始时间不得大于结束时间")
              }
            },
            // 时间结束选择器
            endTimeStatus: function (row) {
              var timestamp = parseInt(new Date(row.EndDate).getTime()/1000);
              let startDateVal = this.startDate;
              if(timestamp<new Date(startDateVal).getTime()){
                  this.overDate = row.EndDate;
              }else{
                  alert("结束时间不得小于开始时间")
              }
            },
        }
    }

每次change时，比较新日期的时间戳与另一个选择器时间戳的大小，若满足条件，才更新日期的值。代码没细看，随便改了改可能有bug，主要给你提供个思路，你试试看。