如何在BootstrapVue中遍历JSON按分组生成独立<tr>标签

解决方案 #

你需要先对原始JSON数据按group字段做分组处理，用计算属性实现最合适，不会修改原数据还支持响应式更新：

1. 新增分组计算属性

computed: {
  groupedItems() {
    const groupResult = {}
    // 遍历原数组按group字段归类
    this.json.forEach(item => {
      if (!groupResult[item.group]) {
        groupResult[item.group] = []
      }
      groupResult[item.group].push(item)
    })
    // 如果需要自定义分组渲染顺序，可以在这里对groupResult的键做排序后再返回
    return groupResult
  }
}

2. 修改模板代码
   把v-for移到<tr>标签上遍历分组，再在每个<tr>内部遍历当前分组的所有表单项即可。注意HTML规范中<tr>的直接子元素应该是<td>，建议按规范补全标签：

<table>
  <tbody>
    <!-- 外层遍历分组，每个分组对应一个tr -->
    <tr v-for="(group, groupKey, groupIndex) in groupedItems" :key="groupIndex">
      <!-- 内层遍历当前分组的表单项 -->
      <td v-for="(item, itemIndex) in group" :key="itemIndex">
        <b-form-input v-if="item.type" :type="item.type"></b-form-input>
      </td>
    </tr>
  </tbody>
</table>

按你提供的示例数据，最终渲染结果和你期望的结构完全一致：Test1分组对应1个包含2个输入框的<tr>，Test2、Test3分组各对应1个包含1个输入框的<tr>。

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