elementUI 表格table-column列顺序错乱解决

问题

需要遍历渲染的table列的顺序为:

              this.list = [
                {
                  label: '地区',
                  prop:  'province'
                },
                {
                  label: '合计',
                  children: [
                    {
                      label: '合计',
                      prop: 'totalCount'
                    },
                    {
                      label: '沪主板',
                      prop: 'shzb'
                    },
                    {
                      label: '科创板',
                      prop: 'kcb'
                    },
                    {
                      label: '深主板',
                      prop: 'szzb'
                    },
                    {
                      label: '创业板',
                      prop: 'cyb'
                    },
                    {
                      label: '北证',
                      prop: 'bjs'
                    }
                  ]
                },
                {
                  label: '本年新增',
                  children: [
                    {
                      label: '本年新增合计',
                      prop: 'qTotalCount'
                    },
                    {
                      label: '沪主板',
                      prop: 'shzb'
                    },
                    {
                      label: '科创板',
                      prop: 'kcb'
                    },
                    {
                      label: '深主板',
                      prop: 'szzb'
                    },
                    {
                      label: '创业板',
                      prop: 'cyb'
                    },
                    {
                      label: '北证',
                      prop: 'bjs'
                    }
                  ]
                }
              ]

渲染代码:

    <el-table
      :data="dataList"
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
      >
      </el-table-column>
      <el-table-column
        v-for="item in list"
        :label="item.label"
        :prop="item.prop"
        :key="item.label"
        align="center"
        :sortable="item.prop"
      >
        <div v-if="item.children">
          <el-table-column
            v-for="val in item.children"
            :label="val.label"
            :prop="val.prop"
            :key="val.label"
            sortable
            align="center"
          >
          </el-table-column>
        </div>
      </el-table-column>
    </el-table>

但是实际的效果却是:

合计应该放在第一列, 但是在实际渲染后却在最后一列, 出现了错乱

解决方式

将架构代码

        <div v-if="item.children">
          <el-table-column
            v-for="val in item.children"
            :label="val.label"
            :prop="val.prop"
            :key="val.label"
            sortable
            align="center"
          >
          </el-table-column>
        </div>

中的div标签换成template

原因是el-table不能嵌套el-table-column以外的元素

https://github.com/ElemeFE/element/issues/1638

在我的情况中, 虽然是el-table-column嵌套el-table-column, 但是经过尝试方法依然是适用的, 问题解决: