Blogging is for taking notes

Preface

In the use of elmentUI perhaps antUI Isochronous cascader When cascading selectors , Tree structure required , Sometimes it is necessary to convert trees and arrays , The transformation of tree and array here will be sub children There is no need for empty time , Avoid choosing white pages in time and space （ As shown in Fig. 1 ）

One 、 Tree to array

   treeToArray(list, newArr = []) {
    
      list.forEach(item => {
    
        const {
     children} = item
        if (children) {
    
          delete item.children
          if (children.length) {
    
            newArr.push(item)
            return this.treeToArray(children, newArr)
          }
        }
        newArr.push(item)
      })
      return newArr
    }

Two 、 Array to tree

listToTree(list, parentId = null) {
    
      return list.filter(item => item.parentId === parentId).map(item => {
    
        let children= this.listToTree(list, item.id)
        if (children.length > 0) {
    
          return {
    
            ...item,
            children
          }
        } else {
    
          return {
    
            ...item
          }
        }
      })
    }

3、 ... and 、 Use

1.data Data defined in ( Trees )options

 options: [
         {
    
            value: 'zhinan',
            label: ' guide ',
            parentId:'0',
            id: "aa",
            children: [
               {
    
                  value: 'shejiyuanze',
                  label: ' Design principles ',
                  parentId:'aa',
                  id: "aa01",
                  children: [
                     {
    
                        value: 'yizhi',
                        label: ' Agreement ',
                        parentId:'aa01',
                        id: "aa0101",
                     }, 
                     {
    
                        value: 'fankui',
                        label: ' feedback ',
                        parentId:'aa01',
                        id: "aa0102",
                     }, 
                  ]
               }, 
            ]
         }, 
         {
    
            value: 'zujian',
            label: ' Components ',
            parentId:'0',
            id: "bb",
            children: [
               {
    
                  value: 'basic',
                  label: 'Basic',
                  parentId:'bb',
                  id: "bb01",
                  children: [
                     {
    
                        value: 'layout',
                        label: 'Layout  Layout ',
                        parentId:'bb01',
                        id: "bb0101",
                     }, 
                  ]
               }, 
               {
    
                  value: 'form',
                  label: 'Form',
                  parentId:'bb',
                  id: "bb02",
                  children: []
               },  
            ]
         }, 
      
         ],

2. Use tree to array （ Note that it is deleted by default when converting to an array children attribute ）

let list = this.treeToArray(this.options)
console.log("list",list)

2. Use array to turn the tree

let tree = this.listToTree(list,list[0].parentId)
console.log("tree",tree)

Notice here when children by [] when , Not mounted by default children attribute