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

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

表頭說(shuō)明：
如果沒(méi)有孩子節(jié)點(diǎn)就只返回如下一個(gè)字段：

name ：名字

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

name ：名字

children : 孩子節(jié)點(diǎn)

數(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",
                            },

                        ]
                    }
                ]
            }
        ];

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

每一項(xiàng)按照表頭展示的順序返回，通過(guò)數(shù)組的形式
返回一個(gè)參數(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ù)代碼生成的效果如圖：

語(yǔ)法高亮用到 codemirror 插件

/**
 * 遞歸遍歷 格式化數(shù)組
 * @param { Array } paramArr 目標(biāo)數(shù)組
 * @param { Number } level 層級(jí)
 */
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é)點(diǎn)就是樹中最底段的節(jié)點(diǎn)
              // 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é)點(diǎn)的所有葉子節(jié)點(diǎn)個(gè)數(shù)
 * @param {Object} json Object對(duì)象
 */
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對(duì)對(duì)象字符串的格式化，美化
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. 效果鏈接：
效果鏈接如下:
復(fù)雜表格設(shè)計(jì)數(shù)據(jù)格式
動(dòng)態(tài)效果：

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