vue+element tree(樹形控件數(shù)據(jù)格式)組件(1)

wangdai 發(fā)布于2019-08-23 11:56 / 3115人閱讀

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

vue+element tree(樹形控件數(shù)據(jù)格式)組件(1),

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

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

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

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

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

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

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

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

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

export function toTreeData(data,id,pid,name) {
// 建立個(gè)樹形結(jié)構(gòu),需要定義個(gè)最頂層的父節(jié)點(diǎn)，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é)點(diǎn)方法,參數(shù)為父節(jié)點(diǎn)的數(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ù)接的四個(gè)值分別是data所有數(shù)據(jù) id id的那個(gè)字段名字 pid 父類id的字段名字 name 內(nèi)容的字段名字（因?yàn)閭鬟^來的字段不一定叫 id pid label所以寫活的）

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

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

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

方法二：最近在gayhub上看到的萬能啊這個(gè)

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