el-table使用递归组件实现多级表头

<el-table
 ref="multipleTable"
 :data="tableData"
 max-height="430"
 style="width: 100%"
>
 <el-table-column
   prop="schoolName"
   label="学科"
   align="center"
   :min-width="firstColumnWidth" fixed>
   <template slot="header" slot-scope="scope">
     {{ firstColumn(scope) }}
   </template>
   <template slot-scope="scope">
     <span class="table_column_first">{{ scope.row.schoolName }}</span>
   </template>
 </el-table-column>
 <column-item v-for="(item,index) in tableTitle" :key="index" :col="item"></column-item>
</el-table>

其中column-item是递归组件实现的多级表头，代码如下：
columnItem.vue组件代码(其中在后台返回的递归数据中，如果children还有下一级数据，则在组件中使用column-item继续使用该组件)：

<template>
  <el-table-column
    :prop="col.attribute"
    :label="col.title"
    :sortable="!col.children||col.children.length==0?'custom':false"
    align="center">
    <template v-if="col.children">
      <column-item v-for="(item, index) of col.children" :key="index" :col="item"></column-item>
    </template>
    <template slot-scope="scope">
      <span :class="{can_click:scope.row[col.attribute].statisticsType==1}">{{ scope.row[col.attribute].valueStr }}</span>
    </template>
  </el-table-column>
</template>

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

<style scoped>
  @import url("../../../common/css/common.css");
  /deep/ .el-table .cell {
    width: auto;
    padding: 0;
    word-break: break-word;
    line-height: 20px;
    font-family: Helvetica, "Arial", 'Microsoft YaHei';
  }
  .el-table span {
    display: inline-block;
    /*max-width: 86px;
    min-width: 60px;*/
    width: 100%;
    text-align: right;
  }
</style>