vue2+elementUi的两个el-date-picker日期组件进行联动

在Vue 2和Element UI中，可以通过双向绑定(v-model)实现两个el-date-picker组件的联动。一个日期选择器的值变化会影响另一个日期选择器的可选范围。以下是一个简单的例子：

<template>
  <div>
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="开始日期"
      :picker-options="startPickerOptions"
      @change="handleStartChange">
    </el-date-picker>
    <el-date-picker
      v-model="endDate"
      type="date"
      placeholder="结束日期"
      :picker-options="endPickerOptions">
    </el-date-picker>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      startPickerOptions: {
        disabledDate: time => time.getTime() > Date.now()
      },
      endPickerOptions: {
        disabledDate: time => time.getTime() < this.startDate
      }
    };
  },
  methods: {
    handleStartChange(val) {
      if (val) {
        this.endPickerOptions.disabledDate = time => time.getTime() < val;
      } else {
        this.endPickerOptions.disabledDate = time => time.getTime() < Date.now();
      }
    }
  }
};
</script>

在这个例子中，startDate控制了结束日期的最小可选值，而endDate控制了开始日期的最大可选值。handleStartChange方法监听startDate的变化，并相应地更新endPickerOptions的disabledDate，以确保结束日期不能早于开始日期。同样地，结束日期的选择也受到endPickerOptions的约束。