vue3如何写一个有联动的日期选择器组，包含开始日期和结束日期

可以使用Vue3中的Composition API来实现一个有联动的日期选择器组。

首先，需要引入日期选择器组件：

<template>
  <div>
    <label>开始日期：</label>
    <DatePicker v-model="startDate" :disabled-date="disabledStartDate" @change="handleStartDateChange" />
    <label>结束日期：</label>
    <DatePicker v-model="endDate" :disabled-date="disabledEndDate" @change="handleEndDateChange" />
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { DatePicker } from 'element-plus';

export default {
  components: {
    DatePicker,
  },
  setup() {
    const startDate = ref(null);
    const endDate = ref(null);

    // 禁止选择开始日期之前的日期
    const disabledStartDate = time => {
      if (endDate.value) {
        return time.getTime() > endDate.value.getTime();
      }
    };

    // 禁止选择结束日期之后的日期
    const disabledEndDate = time => {
      if (startDate.value) {
        return time.getTime() < startDate.value.getTime();
      }
    };

    // 监听开始日期的变化
    const handleStartDateChange = val => {
      endDate.value = null;
    };

    // 监听结束日期的变化
    const handleEndDateChange = val => {
      startDate.value = null;
    };

    // 监听开始日期和结束日期的变化
    watch([startDate, endDate], ([newStartDate, newEndDate]) => {
      if (newStartDate && newEndDate && newStartDate.getTime() > newEndDate.getTime()) {
        [startDate.value, endDate.value] = [endDate.value, startDate.value];
      }
    });

    return {
      startDate,
      endDate,
      disabledStartDate,
      disabledEndDate,
      handleStartDateChange,
      handleEndDateChange,
    };
  },
};
</script>

在这个组件中，我们引入了Element Plus中的DatePicker组件，并使用了Vue3中的Composition API来实现联动效果。

具体来说，我们通过ref函数创建了startDate和endDate两个响应式变量，并在模板中使用v-model指令来绑定它们。

我们还分别实现了disabledStartDate和disabledEndDate两个方法来禁止选择不合法的日期。这里需要注意的是，当选择完开始日期之后，要将结束日期重置为null，以避免选择一个无效的结束日期。

最后，我们使用watch函数来监听startDate和endDate的变化，并在它们发生变化时，交换它们的值，以确保开始日期早于结束日期。