element UI动态生成多级表头的表格

公司项目中展示的表格要求是多级表头的，张这样👇

我看了下 element UI 中的表格里面的多级表头张这样👇

接下来说下怎么实现的：
1、首先封装两个组件 MyTable.vue、MyColumn.vue

MyTable.vue是对表格的封装

<template>
  <div class="my-table">
    <el-table :data="data" height="500">
      <my-column v-for="(item,index) in col" :key="index" :col="item"></my-column>
    </el-table>
  </div>
</template>

<script>
import MyColumn from './MyColumn'
export default {
  components: {
    MyColumn
  },
  props: {
    col: {
      type: Array
    },
    data: {
      type: Array
    }
  }
}
</script>

MyColumn.vue是对表头的封装

<template>
  <el-table-column :prop="col.prop" :label="col.name" align="left">
    <template v-if="col.children">
      <my-column v-for="(item, index) in col.children" :key="index" :col="item"></my-column>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: "MyColumn",
  props: {
    col: {
      type: Object
    }
  }
};
</script>

2、在项目中引用 MyTable.vue 组件

<template>
  <!-- 表 -->
  <my-table :col="col" :data="data"></my-table>
<template/>
<script>
import MyTable from "@/components/MyTable";
export default {
  components: {
    MyTable
  },
  data() {
    return {
    col: [
        {
          name: "指标",
          children: [
            {
              name: "进出口类型",
              children: [{ name: "(时间)/(measures)", prop: "time" }]
            }
          ]
        },
        {
          name: "总体",
          children: [
            {
              name: "进口",
              children: [
                { name: "初值", prop: "istarter" },
                { name: "终值", prop: "iinal" }
              ]
            },
            {
              name: "出口",
              children: [
                { name: "初值", prop: "estarter" },
                { name: "终值", prop: "einal" }
              ]
            }
          ]
        }
      ],
      data:[{
        einal: "148.07",
        estarter: "148.07",
        iinal: "117.95",
        istarter: "117.95",
        time: "2020年06月"
      }]
    }
}
</script>