求助：element-plus如何实现动态多级表头？

<el-table :data="tableInfo.tableData">
  <el-table-column label="地区" prop="area"></el-table-column>
  <el-table-column label="店员数量评级金额">
    <el-table-column v-for="item in tableInfo.headerList" :key="item.key" :label="item.label" :prop="item.key"> </el-table-column>
  </el-table-column>
</el-table>

数据需要自己转下 或者后端就返回那种格式

tableInfo(){
   let tableData= [
    {
      area: "NKA_门店1",
      fullTimeNCs: [
        { label: "1个店员评级金额", price: "100" },
        { label: "2个店员评级金额", price: "400" },
        { label: "3个店员评级金额", price: "600" }
      ]
    },
    {
      area: "NKA_门店12",
      fullTimeNCs: [
        { label: "1个店员评级金额", price: "100" },
        { label: "2个店员评级金额", price: "400" },
        { label: "3个店员评级金额", price: "600" }
      ]
    },
    {
      area: "NKA_门店13",
      fullTimeNCs: [
        { label: "1个店员评级金额", price: "100" },
        { label: "2个店员评级金额", price: "400" },
        { label: "3个店员评级金额", price: "600" }
      ]
    }
  ]
  let headerList=[]
  tableData.forEach((item)=>{
    item.fullTimeNCs.forEach((citem,cindex)=>{
      let key=`customFiled${cindex+1}`
      item[key]=citem.price;
      let find=headerList.find(i=>i.label==citem.label)
      if(!find){
        headerList.push({
          key,
          label:citem.label
        })
      }
    })
  })
  return {
    headerList,
    tableData
  }
}