current position:Home>[Vue, elementui] multi level header display

[Vue, elementui] multi level header display

2021-08-23 04:10:29 Determination_ peak

The input indicator and output indicator are used as the first level header , Each sub item of input indicator and output indicator is used as secondary header , The secondary header is dynamically generated , The renderings are as follows :
image.png

Return data interpretation : Array --> object --> object , Each attribute in the second object is the attribute name and value of the secondary header , The format is as follows :

[
    {
        "executionDetailId": "945f4744-bde9-4c84-9f29-b6b3a18c7b18",
        "executionId": "90a7fe92-370a-49f5-a836-816f6048c002",
        "subjectId": "joys-01",
        "subjectCode": "joys-01",
        "subjectName": " company 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": {
            " near 1 The number of enterprise real estate financing records in the last month ": 1,
            " near 6 Number of records of equity changes of enterprise investors within months ": 3
        },
        "outputIndicatorSet": {
            " Business is abnormal ": 20
        },
        "errorMessage": null
    },
    {
        "executionDetailId": "b8fe23d0-f640-4661-9063-987b2e49fe22",
        "executionId": "90a7fe92-370a-49f5-a836-816f6048c002",
        "subjectId": "joys-02",
        "subjectCode": "joys-02",
        "subjectName": " company 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": {
            " near 1 The number of enterprise real estate financing records in the last month ": 4,
            " near 6 Number of records of equity changes of enterprise investors within months ": 2
        },
        "outputIndicatorSet": {
            " Business is abnormal ": 20
        },
        "errorMessage": null
    },
    {
        "executionDetailId": "f5d144de-1792-451e-aa58-c6897e8e9301",
        "executionId": "90a7fe92-370a-49f5-a836-816f6048c002",
        "subjectId": "joys-03",
        "subjectCode": "joys-03",
        "subjectName": " company 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": {
            " near 1 The number of enterprise real estate financing records in the last month ": 3,
            " near 6 Number of records of equity changes of enterprise investors within months ": 4
        },
        "outputIndicatorSet": {
            " Business is abnormal ": 20
        },
        "errorMessage": null
    }
]

Generate secondary header : In the current business scenario , Of every piece of data inputIndicatorSet and outputIndicatorSet It's all the same , So we define two variables , Take out the properties of the first object :inputIndicatorSet and outputIndicatorSet, The code is as follows :

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

Generate secondary header and value :

<el-table class="execution-detail-table" :data="executionDetail">
    <el-table-column label=" Input indicators " 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" This is the data returned from the background ;
inputIndicatorSet yes json object , Easy to use inputIndicatorSet[key] Take... Directly value value ;
slot-scope="scope" Refers to the current line .
< End >

copyright notice
author[Determination_ peak],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823041025123n.html

Random recommended