element plus+vue3 下拉选择最近一周或者最近一个月 动态日期跟着选择最近一周或最近一个月的范围

哈喽小伙伴们，好久不见！
今天给大家分享一个element plus+vue3 下拉选择最近一周或者最近一个月 动态日期跟着选择最近一周或最近一个月的范围，
在后台项目中，经常需要选择某个时间段的数据。以下是一个用于生成日期范围的方法示例：

<!-- 日期范围下拉选择 -->
        <el-select v-model="httpQuery.sendTime" class="m-2 ml-5 mr-15" @change="handleChange">
          <el-option v-for="item in stime" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <!-- 日期选择 -->
        <el-date-picker v-model="httpQuery.startTime" type="date" placeholder="选择一天" :size="size" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  />
        <span class="f12 ml-5 mr-5">至</span>
        <el-date-picker v-model="httpQuery.endTime" type="date" placeholder="选择一天" :size="size" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  />

下面是功能实现：

在这里插入代码片

const stime = [
  {
    value: null,
    label: '全部'
  },
  {
    value: 1,
    label: '最近一周'
  },
  {
    value: 2,
    label: '最近一个月'
  },
]


// 动态日期
function handleChange() {
  const currentTime = new Date();
  if (httpQuery.value.sendTime === 1) {
    const oneWeekAgo = new Date(currentTime.getTime() - 7 * 24 * 60 * 60 * 1000);
    httpQuery.value.startTime = formatDate(oneWeekAgo);
    httpQuery.value.endTime = formatDate(currentTime);
  } else if (httpQuery.value.sendTime === 2) {
    const oneMonthAgo = new Date(currentTime.getTime() - 30 * 24 * 60 * 60 * 1000);
    httpQuery.value.startTime = formatDate(oneMonthAgo);
    httpQuery.value.endTime = formatDate(currentTime);
  } else  {
    httpQuery.value.startTime = null;
    httpQuery.value.endTime =  null;
  }
   getList();//刷新列表页
}
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}


// 搜索相关操作
const httpQuery = ref({
  keyword: query.keyword,
  sendTime: query.sendTime,
  startTime:null,
  endTime:null
 
})

触发handleChange（）函数的时候调用 getList();//刷新列表页 。