输出指标和输入指标作为一级表头,输出指标和输入指标的每一小项作为二级表头,二级表头是动静生成的,效果图如下:
返回数据解释:数组-->对象-->对象,第二个对象中的每一个属性是二级表头的属性名字和值,格局如下:
[ { "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.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"
指的是以后的行。
<完>