[vue|[vue,elementUI]多级表头展示 [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 } ]

【[vue|[vue,elementUI]多级表头展示】生成二级表头：当前业务场景中，每一条数据的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="https://www.it610.com/article/executionDetail"便是后台返回的数据；
inputIndicatorSet是json对象，便用inputIndicatorSet[key]直接取value值;
slot-scope="scope"指的是当前的行。
<完>