Vue动态多级表头+行列合计+可编辑表格

新建组件：Table.vue

<template>
  <el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label">
    <template v-for="item in coloumnHeader.children">
      <tableColumn
        v-if="item.children && item.children.length"
        :key="item.id"
        :coloumn-header="item"
      />
      <el-table-column
        v-else
        :key="item.name"
        :label="item.label"
        :prop="item.prop"
      />
    </template>
  </el-table-column>
</template>
<script>
export default {
   
  name: 'TableColumn',
  props: {
   
    coloumnHeader: {
   
      type: Object,
      required: true
    }
  }
}
</script>

新建组件：

<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 100%" :span