iview Tree資料格式問題,無限遞迴樹處理資料

囧囧圖圖發表於2018-07-20
View遞迴

問題描述: iview的Tree元件的資料格式跟後臺給的資料不一致,資料是根據id與parentid進行來進行分層級關係的,需要自己處理一下

iview的 tree 資料格式

iview Tree資料格式問題,無限遞迴樹處理資料

1, 資料格式,根據id和pid進行層級關係對比,pid不存在或者為0時,說明是樹的第一級

items:[
    {parentId: 0, title: "服裝", id: 1}
    {parentId: 1, title: "衣服", id: 2}
    {parentId: 1, title: "褲子", id: 3}
    {parentId: 0, title: "傢俱", id: 4}
    {parentId: 4, title: "櫃子", id: 5}
]
複製程式碼

2, 資料處理過程(productsType是data)

  • html程式碼
    <Tree ref="tree" :data="productsType"></Tree>
複製程式碼
  • ts處理資料程式碼
  get productsType () {
    let {productTypeList} = this.tracking // 這個就是後臺拿到的資料data
    // 刪除所有 children,以防止多次呼叫(這一步是最後執行完之後加上的,因為不刪除會多次呼叫)
    productTypeList.forEach(el => {
      delete el.children
    })
    
    let map = {}
    productTypeList.forEach(el => {
      map[el.id] = el // 迴圈data拿到所有的id
    })
    // 注:這樣執行之後map大概是這樣的,map{1:{}, 2:{}, 3,{}, 4:{}, 5:{}},以id為key鍵值
    
    
    let arr = []
    productTypeList.forEach(el => {
      let parent = map[el.parentId] // 拿到所有的pid,如果為真,和id進行對比,如果pid===id,就說明是id的子集
      // map[el.parentId] 以el.parentId去map裡面找key鍵id
      // 比如:parent就相當於 {1:{},4{}},迴圈出來的有pid的跟上面的id對應,說明是上面id的子集,就把這條資料給parent的children,說明是子集
      這裡再看一遍資料格式,找id和parentId的關係
        // items:[
        //     {parentId: 0, title: "服裝", id: 1}
        //     {parentId: 1, title: "衣服", id: 2}
        //     {parentId: 1, title: "褲子", id: 3}
        //     {parentId: 0, title: "傢俱", id: 4}
        //     {parentId: 4, title: "櫃子", id: 5}
        // ]

      if (parent) {
        (parent.children || (parent.children = [])).push(el)
      } else { // 如果不是就是第一級,沒有pid或者pid為0
        arr.push(el)
        console.log('arr', arr)
      }
    })
    return arr
  }
複製程式碼

3, 比較常規的處理資料的方法

    let newData = []
    function TreeData (title, id) {
      this.title = title
      this.id = id
    }
    let len = productTypeList.length
    for (let i = 0; i < len; i++) {
      if (productTypeList[i].parentId === 0) {
        newData.push(new TreeData(productTypeList[i].name, productTypeList[i].id))
      }
    }
    for (let j = 0; j < newData.length; j++) {
      let childrenData = []
      for (let m = 0; m < productTypeList.length; m++) {
        if (newData[j].id === productTypeList[m].parentId) {
          childrenData.push(new TreeData(productTypeList[m].name, productTypeList[m].id))
          newData[j].children = childrenData
        }
      }
    }
    console.log(newData)
    return newData
複製程式碼

相關文章