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不參與仍然在中間佔位，但是將數據改爲空串時’’，就是我們所想的了。