摘要：樹形控件數(shù)據(jù)格式組件最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。

最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。各位前輩幫我解決問題，才勉強搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。

首先說說需求，就是點擊出現(xiàn)彈窗+蒙板，彈窗內(nèi)容是一個樹組件當(dāng)然，什么彈窗大小啊，是否顯示多選框，默認選中，通過關(guān)鍵字過濾節(jié)點（element都自帶好了）幾個常用功能都封進來，等以后用到別的的時候再往里加。都解決了）

今天先記錄處理數(shù)據(jù)的問題

與后臺交流后得知通過接口會拿到這樣的數(shù)據(jù)：

[
            { id: "01", label: "測試活動", pId: "1" },
            { id: "011", label: "測試活動1", pId: "01" },
            { id: "012", label: "測試活動2", pId: "01" },
            { id: "02", label: "測試活動3", pId: "1" },
            { id: "021", label: "測試活動4", pId: "02" },
            { id: "022", label: "測試活動5", pId: "02" },
            { id: "0221", label: "測試活動6", pId: "022" },
            { id: "0222", label: "測試活動7", pId: "022" },
            { id: "0223", label: "測試活動6", pId: "022" },
            { id: "0224", label: "測試活動7", pId: "022" },
            { id: "0225", label: "測試活動6", pId: "022" },
            { id: "0226", label: "測試活動7", pId: "022" },
        ]

而我們查看element的文檔會看到想要用他們的插件數(shù)據(jù)格式是這樣的

    [{
        id: 4,
        label: "二級 1-1",
        children: [{
          id: 9,
          label: "三級 1-1-1"
        }, {
          id: 10,
          label: "三級 1-1-2"
        }]
      }]
    }, {
      id: 2,
      label: "一級 2",
      children: [{
        id: 5,
        label: "二級 2-1"
      }, {
        id: 6,
        label: "二級 2-2"
      }]
    }, {
      id: 3,
      label: "一級 3",
      children: [{
        id: 7,
        label: "二級 3-1"
      }, {
        id: 8,
        label: "二級 3-2"
      }]
    }]

那這就要我們處理數(shù)據(jù)了，先上js代碼

// 循環(huán)出父節(jié)點

export function toTreeData(data,id,pid,name) {
// 建立個樹形結(jié)構(gòu),需要定義個最頂層的父節(jié)點，pId是1
    let parent = [];
    for (let i = 0; i < data.length; i++) {

        if(data[i][pid] !== "1"){
        }else{
          let obj = {
            label: data[i][name],
            id: data[i][id],
            children: []
          };
          parent.push(obj);//數(shù)組加數(shù)組值
        }
        // console.log(obj);
        //  console.log(parent,"bnm");

    }
    children(parent);

// 調(diào)用子節(jié)點方法,參數(shù)為父節(jié)點的數(shù)組
function children(parent) {
console.log(parent)
      if (data.length !== 0) {
        for (let i = 0; i < parent.length; i++) {
          for (let j = 0; j < data.length; j++) {
            if (parent[i].id == data[j][pid]){
              let obj = {
                label: data[j][name],
                id: data[j][id],
                children: []
              };
              parent[i].children.push(obj);
            }
          }
          children(parent[i].children);
        }
      }
    }
    console.log(parent,"bjil")
    return parent;
  }
  toTreeData(this.data,"id","pid","label")//這樣調(diào)用就好使了

上面函數(shù)接的四個值分別是data所有數(shù)據(jù) id id的那個字段名字 pid 父類id的字段名字 name 內(nèi)容的字段名字 （因為傳過來的字段不一定叫 id pid label所以寫活的）

  toTreeData(this.data,"id","pid","label")//這樣調(diào)用就好使了
  //這個回調(diào)函數(shù)作用當(dāng)然是轉(zhuǎn)換數(shù)組的格式

多帶帶拿出來這個函數(shù)不回調(diào)的時候它的作用就是你傳入父元素組成的數(shù)組，它會把每一個父元素的直屬子元素壓入父元素的children字段中去，這樣我們只需要把新生成的子元素組成的數(shù)組當(dāng)做下一次調(diào)用的父元素數(shù)組調(diào)用這個函數(shù)它就會繼續(xù)往里面深入

原作者文章地址：https://www.cnblogs.com/dongy...

getListData(data, config) {
    var id = config.id || "id";
    var pid = config.pid || "pid";
    var children = config.children || "children";
    // var label=config.label || "LctnName";
    var idMap = {};
    var jsonTree = [];
    data.forEach(function (v) {
        idMap[v[id]] = v;
    });
    data.forEach(function (v) {
        var parent = idMap[v[pid]];
        if (parent) {
            !parent[children] && (parent[children] = []);
            parent[children].push(v);
        } else {
            jsonTree.push(v);
        }
    });
    return jsonTree;
}

getListData(
    data.rows, 
    {
        id: "ID",
        pid: "ParentID",
        children: "children"
    }
);

附上gayhub地址 ：
把扁平化的數(shù)據(jù)轉(zhuǎn)換成樹形結(jié)構(gòu)的JSON