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

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

[    {        "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    }]

生成二级表头:以后业务场景中,每一条数据的inputIndicatorSetoutputIndicatorSet都是雷同的,所以咱们定义两个变量,取出第一个对象的属性:inputIndicatorSetoutputIndicatorSet,代码如下:

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

生成二级表头和取值:

<el-table class="execution-detail-table" :data="executionDetail">    <el-table-column label="输出指标" width="120" >        <template v-for="(val, key, index) in inputIndicatorSet">          <el-table-column :label="key" show-overflow-tooltip>            <template slot-scope="scope">              {{ scope.row.inputIndicatorSet[key] }}            </template>          </el-table-column>        </template>    </el-table-column></el-table>

:data="executionDetail"便是后盾返回的数据;
inputIndicatorSet是json对象,便用inputIndicatorSet[key]间接取value值;
slot-scope="scope"指的是以后的行。
<完>