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

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;
  }
  toTreeData(this.data,"id","pid","label")//這樣調用就好使了

上面函數接的四個值分別是data全部數據 id id的那個字段名字 pid 父類id的字段名字 name 內容的字段名字 （由於傳過來的字段不必定叫 id pid label因此寫活的）

toTreeData(this.data,"id","pid","label")//這樣調用就好使了
  //這個回調函數做用固然是轉換數組的格式

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

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

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

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地址 ：
把扁平化的數據轉換成樹形結構的JSON