Vue.js DataTable：API双数组合并为含状态的新数组问题求助

核心问题是你直接引用了原设备对象，导致所有临时记录共享同一个对象引用，修改时会互相影响。必须每次创建新的对象副本，而不是直接赋值引用。

步骤说明： #

1. 先明确区分哪些状态属于warning，哪些属于error，做一个映射表方便统一处理。
2. 遍历每个设备信息对象，为每个符合条件的状态单独生成一条新记录。
3. 每次生成记录时，通过对象展开语法（{...device}）创建设备信息的副本，彻底避免引用污染。

代码示例： #

// 假设从API获取的两个数组
const devices = [
  { name: '设备A', IDs: 'DEV001', date: '2024-05-20' },
  { name: '设备B', IDs: 'DEV002', date: '2024-05-21' }
];

const statusList = [
  { deviceId: 'DEV001', lowSignal: true, lost: true, offline: false },
  { deviceId: 'DEV002', lowSignal: false, lost: false, offline: true }
];

// 定义状态类型映射：key是状态字段名，value是对应的类型（warning/error）
const statusTypeMap = {
  lowSignal: 'warning',
  lost: 'error',
  offline: 'error'
};

// 生成DataTable所需的最终数组
const generateTableData = () => {
  const tableData = [];

  devices.forEach(device => {
    // 匹配当前设备对应的状态对象
    const deviceStatus = statusList.find(item => item.deviceId === device.IDs);
    if (!deviceStatus) return;

    // 遍历所有状态项，生成对应记录
    Object.entries(statusTypeMap).forEach(([statusKey, type]) => {
      if (deviceStatus[statusKey]) {
        // 创建全新的对象副本，确保每条记录独立
        const newRecord = {
          ...device,
          warning: null,
          error: null
        };
        // 根据状态类型设置对应字段
        newRecord[type] = statusKey;
        tableData.push(newRecord);
      }
    });

    // 如果设备没有任何激活状态，可选择添加一条默认记录（可选逻辑）
    const hasActiveStatus = Object.entries(statusTypeMap).some(([key]) => deviceStatus[key]);
    if (!hasActiveStatus) {
      tableData.push({
        ...device,
        warning: null,
        error: null
      });
    }
  });

  return tableData;
};

// 调用生成函数得到最终数据
const finalTableData = generateTableData();

关键细节： #

• {...device}展开语法会创建原设备对象的浅拷贝，确保每条记录都是独立的内存对象，修改时不会影响其他记录。
• statusTypeMap统一管理状态与类型的对应关系，后续新增状态只需修改映射表，无需改动遍历逻辑，扩展性更强。
• 遍历状态项时，只要状态为true就生成一条对应记录，自动满足多状态同时激活时生成多条记录的需求。

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