Vue table dynamic header data processing

Table dynamic header data processing is often used, and recording it is convenient for future reference

1. Define header and table data in data:

tableData: [], //table data 
headerTeamList: [] //table header data 

2. Interface to obtain header data:

getHeaderList () {
serviceApi.getHeaderList().then(res => {
  this.headerTeamList = res.data
})
}

3. Obtain table data and process the results:

getTeamGeneralList () {
params = {
startTime: startTime,
endTime: endTime,
pageNo: this.pagination.pageNo,
pageSize: this.pagination.pageSize
}
serviceApi.getTeamGeneralList(params).then(res => {
this.tableData = res.data.list
this.pagination.total = res.data.total
if (this.tableData && this.tableData.length > 0) {
this.tableData.forEach(item => {
  if (item.teamList && item.teamList.length > 0) {
    item.teamList.forEach(team => {
      this.headerTeamList.forEach(list => {
        if (team.teamId === list.teamId) {
          item[team.teamId + 'addNum'] = team.addNum
          item[team.teamId + 'subtractNum'] = team.subtractNum
          item[team.teamId + 'zs'] = team.zs
        }
      })
    })
  }
})
}
})
}

4. Used in layout:

<el-table
height="450"
:data="tableData"
border
force-scroll="horizontal"
style="width: 100%">
<el-table-column prop="dutyTime" label="date" width="150"></el-table-column>
<el-table-column v-for="item in headerTeamList" :key="item.teamId" :label="item.teamName" width="300">
<el-table-column :prop="item.teamId + 'addNum'" label="bonus points" width="100"></el-table-column>
<el-table-column :prop="item.teamId + 'subtractNum'" label="deduction points" width="100"></el-table-column>
<el-table-column :prop="item.teamId + 'zs'" label="total" width="100"></el-table-column>
</el-table-column>
</el-table>

5. Header data:

{
"code": "0",
"msg": "request successful",
"data": [
{
"teamId": "229287cc74644db79a190b00a5f6d547",
"teamName": "team test name"
},
{
"teamId": "c1488cf39d3a4c24acc6876dc2ffcb83",
"teamName": "eagle squadron"
},
{
"teamId": "d388cbc756894a0bb9fb6c8f7d68ffbf",
"teamName": "test team"
},
{
"teamId": "354cca6e345446e8a941c2b5a26e6b49",
"teamName": "123"
},
{
"teamId": "5044a1df115e428caf8f3f309b292208",
"teamName": "guancheng area"
}
]
}

6. Table data:

{
"code": "0",
"msg": "request successful",
"data": {
"pageNo": 1,
"pageSize": 10,
"list": [
{
  "dutyTime": "2022-03-01",
  "teamList": [
    {
      "teamName": "eagle squadron",
      "addNum": "2.0",
      "teamId": "c1488cf39d3a4c24acc6876dc2ffcb83",
      "zs": "2.0",
      "subtractNum": "0.0"
    },
    {
      "teamName": "team test name",
      "addNum": "0.0",
      "teamId": "229287cc74644db79a190b00a5f6d547",
      "zs": "0.0",
      "subtractNum": "0.0"
    }
  ]
}
],
"total": 1,
"totalPage": 1
}
}

7. Final display effect: