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

Question

<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>

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

Answer 1

解决了，加个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;
            },
        }
}