vue3中el-date-picker根据选择的开始时间往前或往后推5天选择结束时间的全部代码

在 Vue3 中，如果你想使用 Element UI 的 `el-date-picker` 组件实现根据开始时间自动选择结束时间，通常你会在 `v-model` 对象中关联两个日期对象，并通过 JavaScript 的日期处理方法来动态调整。以下是一个简单的示例代码：

<template>
  <div>
    <el-date-picker
      v-model="startDate"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>
    <button @click="addFiveDays">+5天</button>
    <button @click="subtractFiveDays">-5天</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const startDate = ref(new Date()); // 储存开始日期

function addFiveDays() {
  const endDate = new Date(startDate.value);
  endDate.setDate(endDate.getDate() + 5);
  setStartDate(endDate);
}

function subtractFiveDays() {
  const endDate = new Date(startDate.value);
  endDate.setDate(endDate.getDate() - 5);
  setStartDate(endDate);
}

function setStartDate(date) {
  startDate.value = date;
}
</script>

在这个例子中，我们有两个按钮分别用于加减五天，当点击这些按钮时，会更新 `startDate` 的值，并保持其范围内的日期。