VueJS结合Axios实现两个数组指定字段合并及时间格式转换

嘿，这需求我熟，给你一步步搞定！咱们分三个核心步骤来实现：合并数组、筛选保留字段、格式化日期时间。

第一步：封装日期格式化工具函数 #

咱们需要把start（ISO格式日期）和heuredebut（纯时间）拼接成YYYY-MM-DD HH:mm的格式，先写个小函数处理这个逻辑：

const formatDateTime = (dateStr, timeStr) => {
  // 从ISO日期里提取YYYY-MM-DD部分，用Date对象处理兼容更多格式
  const datePart = new Date(dateStr).toISOString().split('T')[0];
  // 从时间字符串里提取HH:mm部分（去掉末尾的秒数）
  const timePart = timeStr.slice(0, 5);
  return `${datePart} ${timePart}`;
};

第二步：合并数组并筛选目标字段 #

假设你已经通过Axios拿到了两个数组array1和array2，接下来咱们合并它们，同时只保留需要的字段，顺便把日期格式化好：

// 用扩展运算符合并两个数组，再遍历处理每个元素
const processedArray = [...array1, ...array2].map(item => {
  return {
    // 这里只保留你需要的字段，可根据实际需求调整
    id: item.id,
    taskName: item.Task?.name, // 用可选链避免Task字段不存在时报错
    userNumber: item.UserNumber,
    startDateTime: formatDateTime(item.start, item.heuredebut),
    endDateTime: formatDateTime(item.end, item.heurefin), // 如果需要结束时间也可以添加
    daysCount: item.Nombredejours
  };
});

这里用[...array1, ...array2]合并数组比concat更直观，map方法用来重新构造只包含所需字段的新对象。

第三步：结合Axios请求的完整Vue示例 #

把逻辑整合到Vue组件的Axios请求流程里，就是这样：

<template>
  <div class="data-container">
    <!-- 渲染处理后的数组数据 -->
    <div v-for="item in mergedData" :key="item.id" class="data-item">
      <p><strong>任务名称：</strong>{{ item.taskName }}</p>
      <p><strong>开始时间：</strong>{{ item.startDateTime }}</p>
      <p><strong>天数：</strong>{{ item.daysCount }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      mergedData: []
    };
  },
  async mounted() {
    try {
      // 同时请求两个接口获取数组数据，提升请求效率
      const [res1, res2] = await Promise.all([
        axios.get('/api/first-data'),
        axios.get('/api/second-data')
      ]);

      const array1 = res1.data;
      const array2 = res2.data;

      // 日期格式化函数
      const formatDateTime = (dateStr, timeStr) => {
        const datePart = new Date(dateStr).toISOString().split('T')[0];
        const timePart = timeStr.slice(0, 5);
        return `${datePart} ${timePart}`;
      };

      // 合并并处理数组
      this.mergedData = [...array1, ...array2].map(item => ({
        id: item.id,
        taskName: item.Task?.name,
        userNumber: item.UserNumber,
        startDateTime: formatDateTime(item.start, item.heuredebut),
        daysCount: item.Nombredejours
      }));
    } catch (err) {
      console.error('数据请求失败：', err);
    }
  }
};
</script>

<style scoped>
.data-container {
  padding: 20px;
}
.data-item {
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
}
</style>

小提示 #

• 如果能确保每个元素的Task字段一定存在，可以去掉可选链?.，直接写item.Task.name；
• 要是需要处理时区问题，可以调整Date对象的格式化方式（比如用toLocaleDateString），但你的需求里只需要ISO日期的日期部分，当前方式完全够用。

内容的提问来源于stack exchange，提问作者user11544096