vue+element tree(樹形控件)組件(1)

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

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

今天先記錄處理數據的問題

與后台交流后得知通過接口會拿到這樣的數據：

[
                { 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的文檔會看到想要用他們的插件數據格式是這樣的

[{
            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'
          }]
        }]

那這就要我們處理數據了，先上js代碼

// 循環出父節點
export function toTreeData(data,id,pid,name) {
    // 建立個樹形結構,需要定義個最頂層的父節點，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);//數組加數組值
            }
            // console.log(obj);
            //  console.log(parent,"bnm");

        }
        children(parent);

    // 調用子節點方法,參數為父節點的數組
    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;
  }

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

toTreeData(this.data,"id","pid","label")//這樣調用就好使了

這個回調函數作用當然是轉換數組的格式

單獨拿出來這個函數不回調的時候它的作用就是你傳入父元素組成的數組，它會把每一個父元素的直屬子元素壓入父元素的children字段中去，這樣我們只需要把新生成的子元素組成的數組當做下一次調用的父元素數組調用這個函數它就會繼續往里面深入