[vue,elementUI]多级表头展示

输入指标和输出指标作为一级表头，输入指标和输出指标的每一小项作为二级表头，二级表头是动态生成的，效果图如下：

返回数据解释：数组-->对象-->对象，第二个对象中的每一个属性是二级表头的属性名字和值，格式如下：

[
    {
        "executionDetailId": "945f4744-bde9-4c84-9f29-b6b3a18c7b18",
        "executionId": "90a7fe92-370a-49f5-a836-816f6048c002",
        "subjectId": "joys-01",
        "subjectCode": "joys-01",
        "subjectName": "公司01",
        "execTimestamp": "2021-07-22T09:08:56.000+00:00",
        "status": "SUCCEEDED",
        "creationTs": "2021-07-22 17:08:56",
        "creatorId": "8c0e93bb-db21-4480-8d28-bf91cbff2003",
        "tenantId": "74a03e75-c696-4ba6-a4c8-30e0ce48f526",
        "subjectProps": {},
        "inputIndicatorSet": {
            "近1个月内企业动产融资记录数": 1,
            "近6个月内企业投资人股权变更记录数": 3
        },
        "outputIndicatorSet": {
            "经营异常": 20
        },
        "errorMessage": null
    },
    {
        "executionDetailId": "b8fe23d0-f640-4661-9063-987b2e49fe22",
        "executionId": "90a7fe92-370a-49f5-a836-816f6048c002",
        "subjectId": "joys-02",
        "subjectCode": "joys-02",
        "subjectName": "公司02",
        "execTimestamp": "2021-07-22T09:08:56.000+00:00",
        "status": "FAILED",
        "creationTs": "2021-07-22 17:08:56",
        "creatorId": "8c0e93bb-db21-4480-8d28-bf91cbff2003",
        "tenantId": "74a03e75-c696-4ba6-a4c8-30e0ce48f526",
        "subjectProps": {},
        "inputIndicatorSet": {
            "近1个月内企业动产融资记录数": 4,
            "近6个月内企业投资人股权变更记录数": 2
        },
        "outputIndicatorSet": {
            "经营异常": 20
        },
        "errorMessage": null
    },
    {
        "executionDetailId": "f5d144de-1792-451e-aa58-c6897e8e9301",
        "executionId": "90a7fe92-370a-49f5-a836-816f6048c002",
        "subjectId": "joys-03",
        "subjectCode": "joys-03",
        "subjectName": "公司03",
        "execTimestamp": "2021-07-22T09:08:56.000+00:00",
        "status": "SUCCEEDED",
        "creationTs": "2021-07-22 17:08:56",
        "creatorId": "8c0e93bb-db21-4480-8d28-bf91cbff2003",
        "tenantId": "74a03e75-c696-4ba6-a4c8-30e0ce48f526",
        "subjectProps": {},
        "inputIndicatorSet": {
            "近1个月内企业动产融资记录数": 3,
            "近6个月内企业投资人股权变更记录数": 4
        },
        "outputIndicatorSet": {
            "经营异常": 20
        },
        "errorMessage": null
    }
]

生成二级表头：当前业务场景中，每一条数据的inputIndicatorSet和outputIndicatorSet都是相同的，所以我们定义两个变量，取出第一个对象的属性：inputIndicatorSet和outputIndicatorSet，代码如下：

this.executionDetail = resp.data
if (this.executionDetail && this.executionDetail.length > 0) {
  this.inputIndicatorSet = this.executionDetail[0].inputIndicatorSet
  this.outputIndicatorSet = this.executionDetail[0].outputIndicatorSet
}

生成二级表头和取值：

:data="executionDetail"便是后台返回的数据；
inputIndicatorSet是json对象，便用inputIndicatorSet[key]直接取value值;
slot-scope="scope"指的是当前的行。
<完>