用vue使用原生table标签如何实现图中效果？

Question

最终效果如下：

数据如下：

[
    {
        "label": "CPU信息",
        "result": "",
        "desc": "",
        "resultStatus": "normal",
        "children": [
            {
                "label": "CPU使用率",
                "result": "3.98%",
                "desc": "",
                "resultStatus": "normal",
                "id": "id_4"
            },
            {
                "label": "CPU核数",
                "result": "4",
                "desc": "",
                "resultStatus": "normal",
                "id": "id_5"
            }
        ],
        "id": "id_1",
    },
    {
        "label": "内存信息",
        "result": "",
        "desc": "",
        "resultStatus": "abnormal",
        "children": [
            {
                "label": "总内存",
                "result": "7.57 GiB",
                "desc": "",
                "resultStatus": "normal",
                "id": "id_6"
            },
            {
                "label": "可用内存",
                "result": "177 MiB",
                "desc": "",
                "resultStatus": "normal",
                "id": "id_7"
            },
            {
                "label": "已用内存",
                "result": "7.4 GiB",
                "desc": "",
                "resultStatus": "normal",
                "id": "id_8"
            },
            {
                "label": "内存使用率",
                "result": "97.7%",
                "desc": "",
                "resultStatus": "abnormal",
                "id": "id_9"
            }
        ],
        "id": "id_2"
    },
    {
        "label": "磁盘信息",
        "result": "",
        "desc": "",
        "resultStatus": "normal",
        "children": [
            {
                "label": [
                    "文件系统：/dev/dm-0",
                    "挂载点：/"
                ],
                "result": [],
                "desc": [],
                "resultStatus": "normal",
                "children": [
                    {
                        "label": "容量",
                        "result": "70.0 GiB",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_12"
                    },
                    {
                        "label": "已用",
                        "result": "20.0 GiB",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_13"
                    },
                    {
                        "label": "可用",
                        "result": "50.0 GiB",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_14"
                    },
                    {
                        "label": "使用率",
                        "result": "29.0%",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_15"
                    }
                ],
                "id": "id_11"
            },
            {
                "label": [
                    "文件系统：/dev/dm-2",
                    "挂载点：/home"
                ],
                "result": [],
                "desc": [],
                "resultStatus": "normal",
                "children": [
                    {
                        "label": "容量",
                        "result": "53.0 GiB",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_17"
                    },
                    {
                        "label": "已用",
                        "result": "1.64 GiB",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_18"
                    },
                    {
                        "label": "可用",
                        "result": "51.4 GiB",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_19"
                    },
                    {
                        "label": "使用率",
                        "result": "3%",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_20"
                    }
                ],
                "id": "id_16"
            },
            {
                "label": [
                    "文件系统：/dev/sda1",
                    "挂载点：/boot"
                ],
                "result": [],
                "desc": [],
                "resultStatus": "normal",
                "children": [
                    {
                        "label": "容量",
                        "result": "1014 MiB",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_22"
                    },
                    {
                        "label": "已用",
                        "result": "255 MiB",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_23"
                    },
                    {
                        "label": "可用",
                        "result": "759 MiB",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_24"
                    },
                    {
                        "label": "使用率",
                        "result": "25%",
                        "desc": "",
                        "resultStatus": "normal",
                        "id": "id_25"
                    }
                ],
                "id": "id_21"
            }
        ],
        "id": "id_3"
    }
]

难点：表格有多列需合并多行，或者不合并

Answer 1

<template>
    <table class="inspection-table">
      <thead>
        <tr>
          <th>巡检项</th>
          <th>巡检内容</th>
          <th>巡检结果</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="section in tableData" :key="section.id">
          <template v-for="(item, itemIndex) in section.children" :key="item.id">
            <template v-if="item.children">
              <tr v-for="(child, childIndex) in item.children" :key="child.id">
                <td v-if="itemIndex === 0 && childIndex === 0" :rowspan="getTotalRows(section)" class="parent-row">
                  {{ section.label }}
                </td>
                <td v-if="childIndex === 0" :rowspan="item.children.length" class="disk-title">
                  <template v-if="Array.isArray(item.label)">
                    <div v-for="label in item.label" :key="label">{{ label }}</div>
                  </template>
                  <template v-else>
                    {{ item.label }}
                  </template>
                </td>
                <td>{{ child.label }}: {{ child.result }}</td>
                <td :class="['status', child.resultStatus]">
                  {{ child.resultStatus === 'normal' ? '正常' : '异常' }}
                </td>
              </tr>
            </template>
            <tr v-else>
              <td v-if="itemIndex === 0" :rowspan="getTotalRows(section)" class="parent-row">
                {{ section.label }}
              </td>
              <td>{{ item.label }}</td>
              <td>{{ item.result }}</td>
              <td :class="['status', item.resultStatus]">
                {{ item.resultStatus === 'normal' ? '正常' : '异常' }}
              </td>
            </tr>
          </template>
        </template>
      </tbody>
    </table>
  </template> 

data(){

return { 
  tableData: [... ]  // 表格数据 省略
}

}
methods: {

// 计算每个section的总行数
getTotalRows(section) {
  return section.children.reduce((sum, item) => {
    return sum + (item.children ? item.children.length : 1);
  }, 0);
}

}