关于vue.js:vueelementUI多级表头展示

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

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

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

生成二级表头和取值：

<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"指的是以后的行。
< 完 >