方式一：重新生成新数组

state.list = res.data.map((item) => ({
             ...item,
             goods: goodsMap.get(item.goods_Barcode),
           }))

 const goodsMap = new Map(
         JSON.parse(localStorage.getItem('goodsList')).map((goods) => [
           goods.g_Barcode,
           goods,
         ])
       )

 <tbody>
        <tr v-for="item in inventoryList" :key="item.id">
          <td>{{ getGoodsTitle(item.goodsId) }}</td>
          <td>{{ getWarehouseName(item.warehouseId) }}</td>
          <td>{{ getUserName(item.userId) }}</td>
          <td>{{ item.quantity }}</td>
        </tr>
      </tbody>

const getGoodsTitle = (goodsId) => {
  const good = goods.find(g => g.id === goodsId);
  return good ? good.title : '未知商品';
};

const getWarehouseName = (warehouseId) => {
  const warehouse = warehouses.find(w => w.id === warehouseId);
  return warehouse ? warehouse.name : '未知仓库';
};

const getUserName = (userId) => {
  const user = users.find(u => u.id === userId);
  return user ? user.name : '未知用户';
};

const getGoods = (barcode) => {
    const mod = state.goodsList.find((g) => g.g_Barcode === barcode)
    return mod ? mod : { g_Title: '未知商品' }
  }

state.list = res.data
          state.list.forEach((item) => {
            item.goods = getGoods(item.goods_Barcode)
          })

• 本文标题： JSON前端映射数据方式
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：简单粗暴的日期格式化
• 下一篇： WPF实现一个带欢迎界面的窗体