el-table自定义表头顺序错乱，以及sortable排序混乱

前提：

自定义报表，需要自定义表头层级。

关键代码：

// el-table
<el-table :data="reportData" width="100%" height="100%">
  <navReport :navReports="reportHeader"></navReport>
</el-table>

// 自定义表头组件
<template>
  <div>
    <!-- <el-table-column width="1"/> -->
    <el-table-column v-for="headone in navReports" :key="headone.id" :label="headone.name" :prop="headone.dataField" :show-overflow-tooltip="true" min-width="100px">
      <el-table-column v-if="headone.unit" :key="headone.id" :label="headone.unit" :prop="headone.dataField" min-width="100px"></el-table-column>
      <navReport v-if="headone&&headone.childs!==null&&headone.childs.length!==0" :navReports="headone.childs"></navReport>
    </el-table-column>
  </div>
</template>

问题来了：

reportHeader对应的是表头的数组数据（参考下面的header），你会发现日期到了最后一列？反正就乱序了，查资料发现有人说是每个层级的第一列都移到了最后，仔细一看，好像是噢，头大还能咋样，组件改不了改自己呗。

方法一：

看到有人说添加

<el-table-column width="1"/>

虽然确实有效，但是可以看到这一格添加到了最后，且有明显的描边痕迹。
所以还是自己处理下reportHeader数据，移动元素位置吧哎，见方法二。

方法二：

对表头进行顺序重组部分关键代码如下，orignHeader参考下面的header，然后对表头顺序进行重组赋值给reportHeader就好了。

changeHeaderSort () {
  this.moveLastToFirst(this.orignHeader) // 对表头进行顺序重组
  this.reportHeader = this.orignHeader
},
moveLastToFirst (list) {
  if (list !== null && list.length !== 0) {
    let last = list.pop() // 删除数组最后一个元素，并返回该元素
    list.unshift(last)
    for (let i = 0; i < list.length; i++) {
      this.moveLastToFirst(list[i].childs)
    }
  }
},

附数据例子：

{
  "header": [{
    "id": "0",
    "name": "报表demo-此处是表头",
    "dataField": "",
    "childs": [
      {
        "id": "1",
        "name": "日期",
        "dataField": "date",
        "childs": []
      },
      {
        "id": "2",
        "name": "配送信息",
        "dataField": "",
        "childs": [
          {
            "id": "2-1",
            "name": "姓名",
            "dataField": "name",
            "childs": []
          },
          {
            "id": "2-2",
            "name": "地址",
            "dataField": "",
            "childs": [
              {
                "id": "2-2-1",
                "name": "省份",
                "dataField": "province",
                "childs": []
              },
              {
                "id": "2-2-2",
                "name": "市区",
                "dataField": "city",
                "childs": []
              },
              {
                "id": "2-2-3",
                "name": "地址",
                "dataField": "address",
                "childs": []
              },
              {
                "id": "2-2-4",
                "name": "邮编",
                "dataField": "zip",
                "childs": []
              }
            ]
          }
        ]
      }
    ]
  }],
  "data": [{
    "date": "2016-05-03",
    "name": "王小虎",
    "province": "上海",
    "city": "普陀区",
    "address": "上海市普陀区金沙江路 1518 弄",
    "zip": 200333
  }, {
    "date": "2016-05-07",
    "name": "王小虎",
    "province": "上海",
    "city": "普陀区",
    "address": "上海市普陀区金沙江路 1518 弄",
    "zip": 200333
  }]
}

补充提及sortable排序混乱

当table的数据为null时通过，sortable排序null不参与仍然在中间占位，但是将数据改为空串时’’，就是我们所想的了。