vue3 el-date-picker开始时间小于结束时间，动态设置时间禁用范围

 首先element ui和element plus的时间禁用属性不同，刚开始我在这里绕了很大一个弯路，还纳闷怎么写都不生效

plus：

 ui:

 

这个是我需要实现的效果图，可以看出tab相当于是遍历生成的，每一个的开始时间都可能不同，相应的禁用范围也要改变。因此当时网上找到前辈们的方法都不太适用。所以我借鉴前辈的方法写了这个。因为偷懒不想控制开始时间要早于结束时间，所以先给了结束时间一个禁用，看代码

 <div class="item">
              <span class="lable">开始时间：</span>
              <div class="value time_box">
                <el-date-picker
                  v-model="item.content.startTime"
                  type="datetime"
                  format="YYYY/MM/DD-HH:mm:ss"
                  value-format="YYYY/MM/DD-HH:mm:ss"
                  @change="startChange(item)"
                />
                <span>北京时间 {{item.content.startTime }}</span>
              </div>
            </div>
            <div class="item">
              <span class="lable">结束时间：</span>
              <div class="value time_box">
                <el-date-picker
                  v-model="item.content.endTime"
                  type="datetime"
                  format="YYYY/MM/DD-HH:mm:ss"
                  :disabled="!item.content.startTime"
                  :disabled-date="pickerOptions"
                  @focus="changeEndTime(item.content.startTime)"
                  value-format="YYYY/MM/DD-HH:mm:ss"
                />
                <div>北京时间 {{item.content.endTime}}</div>
              </div>

const beginDateVal = ref("");
// 开始时间变化时判断是否大于结束时间
const startChange = item => {
  beginDateVal.value = new Date(item.content.startTime).getTime();

  let endVal =
    item.content.endTime == "" ? 0 : new Date(item.content.endTime).getTime();
  if (item.content.endTime == "") {
    return false;
  } else if (beginDateVal.value > endVal) {
    item.content.endTime = "";
  }
};

//结束时间input框获取焦点的时候，计算禁用范围
const changeEndTime = val => {
  pickerOptions();
};
const pickerOptions = time => {
  return time?.getTime() <= beginDateVal.value - 8.64e7;
};

以上的代码就可以实现单个tab的结束时间禁用范围，但是我的tab改变时禁用范围会一直延续上一次的，所以还要完善

 切换tab时如果有开始时间就改变禁用范围的值，如果没有则为空

// 切换卡片改变时间选择范围
const tabChangeHandler = name => {
  //console.log(name, 33);
  let newTab = [];
  newTab = editableTabs.value.filter(item => {
    return item.name == name;
  });
  let statr = newTab[0].content.startTime;
  if (statr !== "") {
    beginDateVal.value = new Date(statr).getTime();
  } else {
    beginDateVal.value = "";
  }
};

 

 这就是我实现的效果，还有一点缺陷时时分秒并不会在禁用范围内，所以同一天的时候会出现开始时间的时分秒大于结束时间。但是到这里对于我的项目已经够用了。