日期开始时间不可晚于计划结束时间

表格中的日期选择器 开始时间不可晚于计划结束时间

每行数组中日期选择器有自己的禁用规则

所以我写到row里

默认会调用tableLoadTime()这个函数

在里面遍历表数据tableData把每行的item传进去

是选择器change方法 但是需要默认调用

考虑业务里 编辑可能会回填日期 也需要有禁用规则

row.startTime()

• 不能选择当天以前的时间
• 如果有结束时间 就不能晚于结束时间 🟰 time > endDate

row.endTime()

• 如果有开始时间 就不能早于开始时间 🟰 time < startDate

需要注意的是 我们是change事件

选择开始时间 触发 change_value 事件 之后

所以我们 dei 在 change_value 里多写点东西

1. 有开始日期，结束日期的禁用规则确定 - time < startDate
2. 选择了结束日期， 开始日期的禁用规则确定 - time < Date.now() - 8.64e7 || time > date;

以下是代码参考

tableLoadTime() {
    this.tableData.forEach(item => {
        this.change_value(item);
    });
}

<vxe-column field="planStartTime" title="计划开始时间" min-width="180">
    <template #default="{ row }">
        <el-date-picker v-model="row.planStartTime" :picker-options="row.startTime"
            @change="change_value(row)" type="date" placeholder="选择日期">
        </el-date-picker>
    </template>
</vxe-column>
<vxe-column field="planEndTime" title="计划结束时间" min-width="180">
    <template #default="{ row }">
        <el-date-picker v-model="row.planEndTime" :picker-options="row.endTime" type="date"
            @change="change_value(row)" placeholder="选择日期"> </el-date-picker>
    </template>
</vxe-column>

change_value(row) {
 row.startTime = {
   disabledDate: time => {
     let date = "";
     row.planEndTime = row.planEndTime ?? "";
     if (row.planEndTime !== "") {
       date = new Date(row.planEndTime);
     } else {
       return;
     }
     return time < Date.now() - 8.64e7 ||  time > new Date(date);
   }
 };
 row.endTime = {
   disabledDate: time => {
     row.planStartTime = row.planStartTime ?? "";
     let date = row.planStartTime == "" ? "" : row.planStartTime;
     return time < new Date(date);
   }
 };
}