elementUI 表格循环生成列导致表头顺序错位

用elementUI比较多了。但这个坑是第一次遇到。
以前都是将列直接写在template里的固定报表，但是在遇到表头需要动态变化，且属于层级不定的复合表头时，会出现，本来写在前面的列会跑到后面去，跟数据的顺序不一致的问题。
如下为封装的动态迭代生成树形复合表头的组件

<template>
  <div class="tableColum">
    <el-table-column
      v-for="item in tableHeader"
      :key="item.code + item.name"
      :prop="item.code"
      :width="item.width"
      :fit="!item.width"
      :label="item.name"
      :align="item.align"
      :sortable="item.sortable"
      :formatter="item.formatter"
    >
      <children-colum
        v-if="item.children && item.children.length"
        :tableHeader="item.children"
      />
    </el-table-column>
  </div>
</template>

<script>
export default {
  name: "children-colum",
  props: {
    tableHeader: {
      type: Array,
      default() {
        return [
		{ name: "序号", code: "INDEX", width: 100, align: "center" },
        // width 为空则自适应撑满
        { name: "项目", code: "XM", width: "", align: "left" },
        ...
		];
      },
    },
  },
  data() {
    return {};
  },
};
</script>

看起来是没问题，但是表格生成后，第一列的序号列会错位到最后一列去。网上没有找到一个遇到同样的问题（-_-||）。
排查后发现问题出在 el-table-column 外面的 div 上，只要在外部嵌套任何一个标签，就会导致渲染后的表头列顺序出现问题。
但是如大家所见，不可能只有一个列。。所以没办法，以前将所有表头列作为一个组件的方式肯定就有问题了。只能将子组件修改为适应一个列的形式，来满足迭代效果，及vue的根节点只能渲染一个标签的限制。
修改后的组件代码如下：

<template>
  <el-table-column
    v-if="data.children && data.children.length"
    :key="data.code + data.name"
    :prop="data.code"
    :width="data.width"
    :fit="!data.width"
    :label="data.name"
    :align="data.align"
    :sortable="data.sortable"
    :formatter="data.formatter"
  >
    <template v-if="data.children">
      <children-colum
        v-for="item in data.children"
        :data="item"
        :key="item.code + item.name"
      />
    </template>
  </el-table-column>

  <el-table-column
    v-else
    :key="data.code + data.name"
    :prop="data.code"
    :width="data.width"
    :fit="!data.width"
    :label="data.name"
    :align="data.align"
    :sortable="data.sortable"
    :formatter="data.formatter"
  >
  </el-table-column>
</template>

<script>
/**
 * 只能以单个列作为子组件复用，否则 只要在外部嵌套任何一个标签，会导致表格列渲染错位
 */
export default {
  name: "children-colum",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
};
</script>

调用时

<el-table
      class="box-table"
      border
      :data="data"
    >
      <tableColum
        v-for="item in tableHeader"
        :data="item"
        :key="item.code + item.name"
      />
</el-table>