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

Question

vue

<el-table :data="tableData">    <el-table-column label="店员数量评级金额">      <template #default="scope">        <el-table-column  v-for="(item,index) in scope.row.fullTimeNCs" :key="item" :label="item.label">                {{ item.price }}        </el-table-column>      </template>    </el-table-column></el-table>

script

<script setup>import { ref } from "vue";这是完整的表格数据，其中fullTimeNCs的长度是动态的`const tableData = ref([  {    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"}],  },]);`</script>

期望结果

店员数量是动态的，但是在这里无法循环渲染el-table-column多级表头

Answer 1

<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  }}