Vue.js 中根据 yncfId 将 yncf 数据塞入 yncfMx 对象

假设您有两个 Vue.js 中的 ref 数组：yncf 和 yncfMx。yncfMx 内的对象包含一个属性 yncfId，它对应于 yncf 内的对象属性 id。如何根据 yncfId 将对应的 yncf 对象塞入 yncfMx 内的对象内容？

您可以使用 Array.prototype.map() 方法来遍历 yncfMx 数组，并根据每个对象的 yncfId 属性找到对应的 yncf 对象，并将其塞入 yncfMx 内对象的一个新属性中。

以下是一个示例代码：

const yncf = ref([]);
const yncfMx = ref([]);

yncfMx.value = await defHttp.get({ url: '/workstation/ylYncf/cfMxlistByIds', params: formData });
yncf.value = await defHttp.get({ url: '/workstation/ylYncf/cflistByIds' });

yncfMx.value = yncfMx.value.map((item) => {
  const correspondingYncf = yncf.value.find((yncfItem) => yncfItem.id === item.yncfId);
  return {
    ...item,
    yncf: correspondingYncf,
  };
});

在上面的代码中，Array.prototype.map() 方法用于遍历 yncfMx 数组中的每个对象。在每次迭代中，使用 Array.prototype.find() 方法找到 yncf 数组中 id 属性与当前 yncfMx 对象的 yncfId 属性匹配的对象。然后，使用对象展开语法将找到的 yncf 对象添加到 yncfMx 内对象的一个新属性 yncf 中。最后，将更新后的 yncfMx 数组赋值给 yncfMx.value。

注意：

defHttp 是一个假设的 HTTP 请求库。请根据您的实际项目情况使用相应的 HTTP 请求库。
该示例代码假设 yncf 数组中的每个对象都有一个唯一的 id 属性。
使用 Array.prototype.find() 方法可以找到 yncf 数组中第一个匹配的对象。如果 yncf 数组中存在多个 id 属性相同的对象，则该方法只会找到第一个匹配对象。

总结

使用 Array.prototype.map() 和 Array.prototype.find() 方法，您可以轻松地根据 yncfId 属性将对应的 yncf 数据塞入 yncfMx 对象中，实现数据关联和整合。