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

  • Z时代
  • 2024-02-11
  • 分类：IT

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>

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

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

回答：

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

以上是 求助：element-plus如何实现动态多级表头？ 的全部内容， 来源链接： utcz.com/p/935091.html

回到顶部