原生table实现表格合并(简单的第一列合并)

html部分用原生table渲染，其中allFields表示除第一列外的所有字段，editFields表示哪几列(哪几个字段)需要编辑

<table border="1" class="table">
  <thead>
    <tr>
      <th>类别</th>
      <th>内容</th>
      <th>综合得分</th>
      <th>原因</th>
    </tr>
  </thead>
  <tbody>
    <template v-for="item in tableData">
      <template v-for="(_item, _index) in item.children">
        <tr :key="_index">
          <td v-if="_index === 0" :rowspan="item.children.length">
            {{ item.category }}
          </td>
          <template v-for="field in allFields">
            <td :key="field + _index">
              <template v-if="editFields.includes(field)">
                <Input v-model="_item[field]" style="width: 100px"></Input>
              </template>
              <template v-else>
                {{ _item[field] }}
              </template>
            </td>
          </template>
        </tr>
      </template>
    </template>
  </tbody>
</table>

其中tableData为后端返回并经过处理的数据，格式如下：

tableData: [
  {
    category: "书籍",
    children: [
      {
        name: "古代书籍",
        category: "书籍",
        score: 10,
        reason: "",
      },
      {
        name: "近代书籍",
        category: "书籍",
        score: 20,
        reason: "",
      },
    ]
  },
  {
    category: "音乐",
    children: [
      {
        name: "古典音乐",
        category: "音乐",
        score: 30,
        reason: "",
      },
      {
        name: "轻音乐",
        category: "音乐",
        score: 40,
        reason: "",
      },
    ]
  },
],

allFields值为：[‘name’, ‘score’, ‘reason’]
editFields值为：[‘score’]

当需要动态改变哪几列可编辑时，只需要改变editFields即可

实现效果如下：