Vue项目HTML表格渲染仓库产量对比数据出现重复条目问题排查

导致每个仓库每日出现多条重复数据的核心原因是模板循环逻辑缺少仓库ID匹配规则，嵌套循环逻辑冗余，具体拆解如下：

• 你的模板里已经在日期列下做了两层循环：第一层遍历所有仓库（对应变量是location即仓库ID），第二层遍历当前仓库下的所有日期匹配当前列日期。但匹配到对应日期后，你又遍历了全量的activelocation数组，仅判断了日期相等，没有加当前循环的仓库ID和可用配置的location字段相等的过滤条件，导致每个仓库的循环块里，都会把同日期下所有仓库的可用配置都输出一遍。
• 额外还存在变量名重复的问题：外层循环的仓库ID变量名是location，内层遍历activelocation的变量名也叫location，会出现作用域覆盖，进一步导致逻辑混乱。

1. 先把可用产量数组转成和dateNumberData同结构的嵌套对象，方便直接取值，避免循环匹配：

// 新增computed属性
availableMap() {
  return this.available.reduce((map, item) => {
    if (!map[item.location]) map[item.location] = {}
    map[item.location][item.date] = item.product_avail
    return map
  }, {})
}

2. 简化模板循环逻辑，去掉多余的内层循环：

<div id="app">
<table>
<th v-for="date in dates" :key="date" >   
  <div v-for="(value, warehouseId) in dateNumberData" :key="warehouseId">   
    <div v-if="value.dates[date]">
      <div :style="'background: ' + (value.dates[date].qty_for_date > availableMap[warehouseId]?.[date] ? '#f7a7a3' : '#a8f0c6')">
        <h4 style="display:inline-block; font-weight: bold;">Warehouse {{warehouseId}}</h4>: {{availableMap[warehouseId]?.[date]}}
      </div>
    </div>
  </div>
</th>
</table>
</div>

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