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
}