vue2的el-table多级动态表头，get！

<template>
  <el-table
    :data="AllData"
    style="width: 70%"
    show-summary
    :summary-method="getSummaries"
  >
    <el-table-column label="员工技能矩阵表" align="center">
      <el-table-column label="生产中心">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column
          prop="title"
          label="姓名/技能"
          width="140"
          align="center"
        >
        </el-table-column>
        <!-- 第一级表头 -->

        <el-table-column
          v-for="(item, index) in allList"
          :key="index"
          :label="index + 1 + ''"
          align="center"
        >
          <!-- 第二级表头 -->
          <el-table-column
            :prop="item.key"
            :label="item.feeName"
            sortable
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column prop="join" label="掌握技能个数" align="center" />
      </el-table-column>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const AllData = ref([])
const allList = ref([])
onMounted(() => {
  console.log(`the component is now mounted.`)
  var getData = ref([
    {
      title: '小明',
      data: [
        {
          feeName: '电料机',
          num: 2001,
        },
        {
          feeName: '焊接',
          num: 2002,
        },
        {
          feeName: '分板机',
          num: 2003,
        },
        {
          feeName: '印刷机',
          num: 2004,
        },
        {
          feeName: '清洗剂',
          num: 204,
        },
        {
          feeName: 'ICT',
          num: 20,
        },
      ],
    },
    {
      title: '小白',
      data: [
        {
          feeName: '电料机',
          num: 1,
        },
        {
          feeName: '焊接',
          num: 20,
        },
        {
          feeName: '分板机',
          num: 13,
        },
        {
          feeName: '印刷机',
          num: 43,
        },
        {
          feeName: '清洗剂',
          num: 44,
        },
        {
          feeName: 'ICT',
          num: 2,
        },
      ],
    },
    {
      title: '小红',
      data: [
        {
          feeName: '电料机',
          num: 31,
        },
        {
          feeName: '焊接',
          num: 2,
        },
        {
          feeName: '分板机',
          num: 3,
        },
        {
          feeName: '印刷机',
          num: 43,
        },
        {
          feeName: '清洗剂',
          num: 52,
        },
        {
          feeName: 'ICT',
          num: 22,
        },
      ],
    },
  ])

  getData.value.forEach((item, index) => {
    let a = {}
    let b = []
    a['title'] = getData.value[index].title
    let x = 0
    let join = 0
    getData.value[index].data.forEach((column) => {
      x++
      join += column.num
      b.push({ feeName: column.feeName, key: 'num' + x })
      a['num' + x] = column.num
      a['join'] = join
    })
    AllData.value.push(a) // 表格数据
    allList.value = b // 表头column字段
  })
})

const getSummaries = (param) => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 1) {
      sums[index] = `掌握人数`
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
      sums[index] += ' '
    } else {
      sums[index] = ' '
    }
  })

  return sums
}
</script>