vue+element-ui動態生成多級表頭，並且將有相同字段下不同子元素合並為同一個

element表頭要多層生成，下一級表頭數據源必須是當前表頭的子一級，這樣一層一層嵌套可以生成多層表頭：

 

要把數據處理成這種類型的數據

           var arr = [];
            for (var key in obj) {
              var item = {};
              item.children = new Object()
              item.children[key] = obj[key]
              item.id = res[0][key]
              item.lable = res[1][key];
              arr.push(item);
            }

 

在vue的頁面上對於循環的處理也是要多層循環：

　　<el-table-column v-for="(item,key1) in tablehead"  :key="key1" :label="item.lable" v-if="key1!=0">
         <el-table-column v-for="(value,key) in item.children" :prop="key" :key="key" :label-class-name="key" :label="value" :id="key">

　　　　　　　　　　<!-- 如果要生成多層循環表頭，在這里面一直嵌套處理一下就行了 -->

　　　　　 </el-table-column>
    </el-table-column>

 對於用別人的ui框架，最好就是改下數據源，適應框架的數據源的結構：

之前數據結構是這種

 

現在要把每項相同lable的數據的children放在一個下面;

:

將相同字段合並為一個

            var temp = [],
                ob = {}
            for(var i in arr){
              let item = arr[i]
              if(!ob[item.lable]){
                temp.push({
                  lable:item.lable,
                  id:item.id,
                  children:item.children
                });
                ob[item.lable] = item.lable
              }else{
                for(var j in temp){
                  if(temp[j].lable == item.lable){
                    for(var o in item.children){
                      // 通過對象循環給把每個children的賦值給一個
                      temp[j].children[o]= item.children[o]
                    }
                  }
                }
              }
            }