两个el-date-picker联动

要实现两个el-date-picker的联动，您可以使用v-model绑定不同的日期数据，并使用watch监听其中一个日期的变化，然后在watch回调函数中更新另一个日期的范围。下面是一个示例代码：

<template>
  <div>
    <el-date-picker
      v-model="startDate"
      :disabled-date="disabledStartDate"
      @change="handleStartDateChange"
    ></el-date-picker>
    <el-date-picker
      v-model="endDate"
      :disabled-date="disabledEndDate"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: null,
      endDate: null,
    };
  },
  watch: {
    startDate(newDate) {
      // 在startDate变化时，更新endDate的可选范围
      this.endDate = null; // 清空endDate的值
      this.$refs.endDatePicker.$children[0].picker.minDate = newDate; // 更新endDate的最小可选日期
    },
  },
  methods: {
    disabledStartDate(date) {
      if (this.endDate) {
        return date > this.endDate; // 禁用大于endDate的日期
      }
      return false;
    },
    disabledEndDate(date) {
      if (this.startDate) {
        return date < this.startDate; // 禁用小于startDate的日期
      }
      return false;
    },
    handleStartDateChange() {
      // 在startDate变化时，触发endDate的change事件
      this.$refs.endDatePicker.$emit('change');
    },
  },
};
</script>

在上面的代码中，我们使用了两个el-date-picker组件，分别绑定了startDate和endDate的数据。通过watch监听startDate的变化，当startDate发生变化时，我们清空endDate的值，并更新endDate的最小可选日期为新的startDate。同时，我们在startDate的change事件中手动触发endDate的change事件，以便更新endDate的可选范围。通过这种方式，两个el-date-picker就可以实现联动效果，确保endDate的可选范围始终大于等于startDate。