一、将Table和Column封装成两个组件

        封装两个组件，分别为DynamicTable.vue和TableColumn.vue，TableColumn.vue主要是使用递归来对表头进行循环生成DynamicTable.vue

DynamicTable.vue

<template>
    <el-table :data="tableData" border :height="height">
      <template v-for="item in tableHeader">
        <table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></table-column>
        <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop"></el-table-column>
      </template>
    </el-table>
  </template>
  
  <script>
  import TableColumn from './TableColumn'
  export default {
    props: {
      // 表格的数据
      tableData: {
        type: Array,
        required: true
      },
      // 多级表头的数据
      tableHeader: {
        type: Array,
        required: true
      },
      // 表格的高度
      height: {
        type: String,
        default: '300'
      }
    },
    components: {
      TableColumn
    }
  }
  </script>
  
  <style scoped>
  
  </style>

TableColumn.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"></tableColumn>
        <el-table-column v-else :key="item.name" :label="item.label" :prop="item.prop"></el-table-column>
      </template>
    </el-table-column>
  </template>
  
  <script>
  export default {
    name: 'tableColumn',
    props: {
      coloumnHeader: {
        type: Object,
        required: true
      }
    }
  }
  </script>
  
  <style scoped>
  
  </style>

二、使用

<template>
    <dynamic-table 
        :table-data="tableData" 
        :table-header="tableConfig" 
        v-if="dynamicTableShow"
    ></dynamic-table>
</template>
<script>
import DynamicTable from './components/DynamicTable'

export default {
    components: {
        DynamicTable
    },
    data() {
        return {
            tableData: [],
            tableConfig: [],
            dynamicTableShow: false
        }
    }
}
</script>

三、引用

虽然例子是好用的，但是根据版本情况应该修改的地方记得改。

引用来源：element UI实现动态生成多级表头 - DHeng - 博客园 (cnblogs.com)