vue+element tree(樹狀控制項資料格式)元件的知識點總結

這篇文章帶給大家的內容是關於vue element tree(樹形控制資料格式)元件的知識點總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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

首先說說需求，就是點擊出現彈窗蒙板，彈窗內容是一個樹組件當然，什麼彈窗大小啊，是否顯示多選框，預設選中，透過關鍵字過濾節點（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字段中去，這樣我們只需要把新產生的子元素組成的陣列當做下一次呼叫的父元素數組呼叫這個函數它就會繼續往裡面深入

相關推薦：

php 無限分門別類別 樹形資料 格式化

YiiFramework入門知識點總結(圖文教學)，yiiframework知識點

#

以上是vue+element tree(樹狀控制項資料格式)元件的知識點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！