element-plus table部分列根據介面返回key展示

實現效果根據刷選年份返回對應年份作為部分列

1. 處理介面資料

　　介面返回資料格式

　　需要處理成

　　處理過程

data.message && data.message.forEach((item:any)=>{
        let obj = {}
        for(var key in item){
            if(Number(key)){
                Object.assign(obj, {[key]: item[key]})
            }
            item.data = Object.assign(obj)
        }
    })
    state.yearcolumns = Array.from(new Set(data.message.flatMap((item:any) => Object.keys(item.data))))  //state.yearcolumns 輸出[2023,2024]作為對應列標題

state.tableData = data.message

表格渲染

<el-table :data="state.tableData" :border="true"  minHeight="1000" class='table-main'  @selection-change="handleSelectionChange" v-loading="state.tabLoading" element-loading-text="Loading..." :header-cell-style="state.headStyle" >
                    <el-table-column type="selection" label="全選" align="center" width="50" />
                    <el-table-column type="index" label="序號" align="center" width="80" />
                    <el-table-column prop="total_num" label="合同總個數" align="center" width="100" />
                    <el-table-column prop="total_contract_money" label="合同總金額" align="center" min-width="100" />
                    
                    <el-table-column v-for="(item,index) in state.yearcolumns" :key="item" :label="item+ '年'"  align="center" show-overflow-tooltip>
                      <el-table-column prop="num" label="合同個數" align="center" width="80">
                          <template #default="{ row }">
                            {{ getYearData(row, item, 'num', '') }}
                          </template>
                      </el-table-column>
                      <el-table-column prop="contract_money" label="合同金額" align="center" min-width="100">
                          <template #default="{ row }">
                            {{ getYearData(row, item, 'contract_money', '') }}
                          </template>
                      </el-table-column>
                      <el-table-column prop="" label="已簽訂" align="center">
                        <el-table-column prop="" label="個數" align="center" width="70">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '已籤', 'num') }}
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="金額" align="center" min-width="100">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '已籤', 'total_contract_money') }}
                          </template>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column prop="" label="未簽訂" align="center">
                        <el-table-column prop="" label="個數" align="center" width="80">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '未籤', 'num') }}
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="金額" align="center" min-width="100">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '未籤', 'total_contract_money') }}
                          </template>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column prop="" label="不簽訂" align="center">
                        <el-table-column prop="" label="個數" align="center" width="80">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '不籤', 'num') }}
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="金額" align="center" min-width="100">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '不籤', 'total_contract_money') }}
                          </template>
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default="{row}">
                            <el-button style="padding:0" text size='small' @click="openViewTasks(row)">視覺化展示</el-button>
                        </template>
                    </el-table-column>

                </el-table>

const getYearData = (row:any, year:any, name:String, subName:any) =>{
  if(name == 'num'){
    return row.data[year].num || '--';
  }
  if(name == 'contract_money'){
    return row.data[year].contract_money || '0';
  }
  if(name == '已籤' || '未籤' || '不籤'){
    let val = row.data[year].status.filter((item:any)=>item.iscontract==name)
    if(subName== 'num'){
      if(val.length != 0){
        return val[0].total_num
      }
    }
    if(subName== 'total_contract_money'){
      if(val.length != 0){
        return val[0].total_contract_money
      }
    }
  }
  // return
}