Vue v-for渲染表格行重复 同Id数据分组至同一单元格问题

问题现象 #

• 开发Vue表格组件时出现列重复渲染异常，未绑定自定义class的列不会触发该问题
• 预期实现效果：Id相同的数据对象合并分组，展示到同一个表格单元格中
• 实际异常表现：第二行数据重复渲染

现有实现代码 #

表格模板 #

<tr v-for="(item, key) in array.filter(el => el.Id !== null)">
  <td>@{{ key + 1 }}.</td>
  <td>
    <div 
      v-for="subitem in array.filter(el => el.Id === item.Id)" 
      v-bind:class="array.filter(el => el.Id === item.Id).length > 1 ? 'children-row' : ''"
    >
      @{{ subitem.NAME }}
      <span">
        <i> edit </i>
      </span>
    </div>
  </td>
  <td>
    @{{ item.NAME2 }}
  </td>
</tr>

测试数据 #

[
  { Name: "John", Id: 10, NAME2: "Joey", IdParent: 16 },
  { Name: "Mike", Id: 11, NAME2: "Mark", IdParent: 19 },
  { Name: "Andrew", Id: 13, NAME2: "Mark", IdParent: 19 }
]

自定义样式 #

.children-row {
  padding-top: 6px;
}
.children-row:nth-child(odd) {
  padding-top: 0px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e5e5;
}

问题根因 #

1. 外层v-for直接遍历原始数组，没有提前对相同Id的数据做去重分组，原始数组有多少个非空Id项就会渲染多少行，是重复渲染的核心原因
2. 模板内多次重复执行array.filter()做全量遍历，Vue响应式追踪依赖时会重复触发计算，加重渲染异常
3. 模板中<span">存在多余双引号的语法错误，会导致DOM解析异常

修复步骤 #

1. 新增计算属性提前对数据按Id分组，外层循环只遍历分组后的唯一Id条目，从根源避免重复渲染行

computed: {
  tableGroupData() {
    const idMap = new Map()
    this.array.forEach(item => {
      if (item.Id === null) return
      if (!idMap.has(item.Id)) {
        idMap.set(item.Id, {
          rowBase: item,
          sameIdList: []
        })
      }
      idMap.get(item.Id).sameIdList.push(item)
    })
    return Array.from(idMap.values())
  }
}

2. 修正模板语法错误，替换遍历数据源为分组后的计算属性，给所有v-for绑定唯一key，简化class判断逻辑

<tr v-for="(group, index) in tableGroupData" :key="group.rowBase.Id">
  <td>{{ index + 1 }}.</td>
  <td>
    <div 
      v-for="subItem in group.sameIdList" 
      :key="subItem.Name"
      :class="{ 'children-row': group.sameIdList.length > 1 }"
    >
      {{ subItem.NAME }}
      <span>
        <i> edit </i>
      </span>
    </div>
  </td>
  <td>
    {{ group.rowBase.NAME2 }}
  </td>
</tr>

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