摘要：表頭設(shè)計原理和多叉樹的原理類似，參考了它的展示形式。大家一起交流成長。

原理：
和多叉樹的原理類似，參考了它的展示形式。

表頭說明：
如果沒有孩子節(jié)點就只返回如下一個字段：

name ：名字

如果有孩子節(jié)點，就把數(shù)據(jù)加在children里面，層層嵌套，返回字段如下：

name ：名字

children : 孩子節(jié)點

數(shù)據(jù)結(jié)構(gòu)格式，參考如下代碼：

headerData:[
            {
                name: "地區(qū)",
            },
            {
                name: "總數(shù)據(jù)",
                children: [
                    {
                        name: "數(shù)據(jù)1",
                        children: [
                            {
                                name: "數(shù)據(jù)11",
                                children: [
                                    {
                                        name: "數(shù)據(jù)111",
                                    },
                                    {
                                        name: "數(shù)據(jù)112",
                                    }
                                ]
                            },
                            {
                                name: "數(shù)據(jù)12",
                                children: [
                                    {
                                        name: "數(shù)據(jù)121",
                                    },
                                    {
                                        name: "數(shù)據(jù)122",
                                    }
                                ]
                            },
                            {
                                name: "數(shù)據(jù)13",
                                children: [
                                    {
                                        name: "數(shù)據(jù)131",
                                    },
                                    {
                                        name: "數(shù)據(jù)132",
                                    }
                                ]
                            },
                            {
                                name: "數(shù)據(jù)14",
                            },

                        ]
                    }
                ]
            }
        ];

表頭的寬高方面，前端計算，后端不用管，按照如下格式返回數(shù)據(jù)即可。

每一項按照表頭展示的順序返回，通過數(shù)組的形式
返回一個參數(shù)：

bodyData：總數(shù)據(jù)

數(shù)據(jù)結(jié)構(gòu)格式參考代碼如下：

bodyData:[
        ["地區(qū)最先","數(shù)據(jù)111","數(shù)據(jù)112","數(shù)據(jù)121","數(shù)據(jù)122","數(shù)據(jù)131","數(shù)據(jù)132","數(shù)據(jù)14"],
        ["地區(qū)","數(shù)據(jù)111","數(shù)據(jù)112","數(shù)據(jù)121","數(shù)據(jù)122","數(shù)據(jù)131","數(shù)據(jù)132","數(shù)據(jù)14"],
        ["地區(qū)","數(shù)據(jù)111","數(shù)據(jù)112","數(shù)據(jù)121","數(shù)據(jù)122","數(shù)據(jù)131","數(shù)據(jù)132","數(shù)據(jù)14"],
        ["地區(qū)","數(shù)據(jù)111","數(shù)據(jù)112","數(shù)據(jù)121","數(shù)據(jù)122","數(shù)據(jù)131","數(shù)據(jù)132","數(shù)據(jù)14"],
        ["地區(qū)","數(shù)據(jù)111","數(shù)據(jù)112","數(shù)據(jù)121","數(shù)據(jù)122","數(shù)據(jù)131","數(shù)據(jù)132","數(shù)據(jù)14"],
        ["地區(qū)","數(shù)據(jù)111","數(shù)據(jù)112","數(shù)據(jù)121","數(shù)據(jù)122","數(shù)據(jù)131","數(shù)據(jù)132","數(shù)據(jù)14"],
        ["地區(qū)","數(shù)據(jù)111","數(shù)據(jù)112","數(shù)據(jù)121","數(shù)據(jù)122","數(shù)據(jù)131","數(shù)據(jù)132","數(shù)據(jù)14"],
        ["地區(qū)","數(shù)據(jù)111","數(shù)據(jù)112","數(shù)據(jù)121","數(shù)據(jù)122","數(shù)據(jù)131","數(shù)據(jù)132","數(shù)據(jù)14"], 
        ["地區(qū)","數(shù)據(jù)111","數(shù)據(jù)112","數(shù)據(jù)121","數(shù)據(jù)122","數(shù)據(jù)131","數(shù)據(jù)132","數(shù)據(jù)14"], 
        ["地區(qū)最后","數(shù)據(jù)111","數(shù)據(jù)112","數(shù)據(jù)121","數(shù)據(jù)122","數(shù)據(jù)131","數(shù)據(jù)132","數(shù)據(jù)14"], 
    ]

如上表頭與表格數(shù)據(jù)代碼生成的效果如圖：

語法高亮用到 codemirror 插件

/**
 * 遞歸遍歷 格式化數(shù)組
 * @param { Array } paramArr 目標數(shù)組
 * @param { Number } level 層級
 */
export function formatArray(paramArr, level) {
  let levelFirst = Number(level)
  const arr = []
  let childArr = []
  for (let i = 0; i < paramArr.length; i++) {
      let obj = {}
      for (let j in paramArr[i]) {
          if (j != "children") {
              obj[j] = paramArr[i][j]
          }
          obj["level"] = levelFirst
          obj["width"] = getLeafCountTree(paramArr[i])
          if (!paramArr[i].children) {
              obj["childrenNumber"] = 0
              // LeafNode: 葉子節(jié)點就是樹中最底段的節(jié)點
              // obj["isLeafNode"] = true
          } else {
              // obj["isLeafNode"] = false
              obj["childrenNumber"] = paramArr[i].children.length
          }
      }
      arr.push(obj)
      if (paramArr[i].children) {
          let lev = Number(levelFirst) + 1
          childArr = childArr.concat(formatArray(paramArr[i].children, lev));
      }
  }
  let endArr = arr.concat(childArr)
  return endArr
}

/**
 * 獲取 節(jié)點的所有葉子節(jié)點個數(shù)
 * @param {Object} json Object對象
 */
export function getLeafCountTree(json) {
  if(!json.children){
      return 1;
  }else{
      var leafCount = 0;
      for(var i = 0 ; i < json.children.length ; i++){
          leafCount = leafCount + getLeafCountTree(json.children[i]);
      }
      return leafCount;
  }
}

// json對對象字符串的格式化，美化
export function  jsonFromat (text_value){
  　　if(text_value == ""){
     　　alert("不能為空");  
     　　return false;
  　　} else {
          var json=eval("(" + text_value + ")");
          text_value=JSON.stringify(json);
          var res="";
          for(var i=0,j=0,k=0,ii,ele;i





5. 效果鏈接：
效果鏈接如下:
復雜表格設(shè)計數(shù)據(jù)格式
動態(tài)效果：

最后
對 全棧開發(fā) 有興趣的朋友可以掃下方二維碼關(guān)注我的公眾號 —— 愛寫bugger的阿拉斯加
分享 web 開發(fā)相關(guān)的技術(shù)文章，熱點資源，全棧程序員的成長之路。
大家一起交流成長。
只要關(guān)注公眾號并回復 福利 便送你六套視頻資源：  Python、Java、Linux、Go、vue、react、javaScript