• JS 树形数据处理

    树形结构数据

    1. let arr = [
    2.         {
    3.             "platformId":"461417688549658625",
    4.             "platformName":"蘑菇小姐的测试平台",
    5.             "roles":[
    6.                 {
    7.                     "roleId":968589,
    8.                     "roleName":"平台管理员"
    9.                 }
    10.             ]
    11.         },
    12.         {
    13.             "platformId":"419419609251475533",
    14.             "platformName":"昨日头条",
    15.             "roles":[
    16.                 {
    17.                     "roleId":968576,
    18.                     "roleName":"丑角"
    19.                 },
    20.                 {
    21.                     "roleId":968574,
    22.                     "roleName":"平台管理员"
    23.                 }
    24.             ]
    25.         },
    26.         {
    27.             "platformId":"419419609251475530",
    28.             "platformName":"今日头条",
    29.             "roles":[
    30.                 {
    31.                     "roleId":968570,
    32.                     "roleName":"大主播"
    33.                 }
    34.             ]
    35.         },
    36.         {
    37.             "platformId":"419419609251475529",
    38.             "platformName":"张松测试平台",
    39.             "roles":[
    40.                 {
    41.                     "roleId":968569,
    42.                     "roleName":"平台管理员"
    43.                 },
    44.                 {
    45.                     "roleId":968568,
    46.                     "roleName":"test"
    47.                 }
    48.             ]
    49.         },
    50.         {
    51.             "platformId":"419419609251475527",
    52.             "platformName":"新建测试平台",
    53.             "roles":[
    54.                 {
    55.                     "roleId":968560,
    56.                     "roleName":"平台管理员"
    57.                 }
    58.             ]
    59.         },
    60.         {
    61.             "platformId":"30205329925878161",
    62.             "platformName":"wxy的测试平台",
    63.             "roles":[
    64.                 {
    65.                     "roleId":968587,
    66.                     "roleName":"运营"
    67.                 },
    68.                 {
    69.                     "roleId":968556,
    70.                     "roleName":"船长"
    71.                 },
    72.                 {
    73.                     "roleId":968555,
    74.                     "roleName":"副船长"
    75.                 }
    76.             ]
    77.         },
    78.         {
    79.             "platformId":"30205329925878041",
    80.             "platformName":"平台权限管理系统",
    81.             "roles":[
    82.                 {
    83.                     "roleId":968495,
    84.                     "roleName":"平台普通用户"
    85.                 },
    86.                 {
    87.                     "roleId":968466,
    88.                     "roleName":"普通管理员"
    89.                 },
    90.                 {
    91.                     "roleId":2,
    92.                     "roleName":"平台管理员"
    93.                 },
    94.                 {
    95.                     "roleId":1,
    96.                     "roleName":"超级管理员"
    97.                 }
    98.             ]
    99.         },
    100.         {
    101.             "platformId":"30205329925877901",
    102.             "platformName":"DPS-数字化采购平台-供应商端",
    103.             "roles":[
    104.                 {
    105.                     "roleId":968565,
    106.                     "roleName":"平台管理员"
    107.                 }
    108.             ]
    109.         },
    110.         {
    111.             "platformId":"43",
    112.             "platformName":"管理",
    113.             "roles":[
    114.                 {
    115.                     "roleId":968494,
    116.                     "roleName":"gg"
    117.                 },
    118.                 {
    119.                     "roleId":968493,
    120.                     "roleName":"gg"
    121.                 },
    122.                 {
    123.                     "roleId":968492,
    124.                     "roleName":"普通用户"
    125.                 },
    126.                 {
    127.                     "roleId":968491,
    128.                     "roleName":"平台管理员"
    129.                 }
    130.             ]
    131.         },
    132.         {
    133.             "platformId":"42",
    134.             "platformName":"vip",
    135.             "roles":[
    136.                 {
    137.                     "roleId":968490,
    138.                     "roleName":"平台管理员"
    139.                 }
    140.             ]
    141.         },
    142.         {
    143.             "platformId":"41",
    144.             "platformName":"test平台1",
    145.             "roles":[
    146.                 {
    147.                     "roleId":968548,
    148.                     "roleName":"哈_哈%"
    149.                 },
    150.                 {
    151.                     "roleId":968532,
    152.                     "roleName":"平台管理员"
    153.                 },
    154.                 {
    155.                     "roleId":968477,
    156.                     "roleName":"平台管理员"
    157.                 },
    158.                 {
    159.                     "roleId":968476,
    160.                     "roleName":"role1"
    161.                 }
    162.             ]
    163.         }
    164.     ]

    在vue中的写法：

    1.树形数据转成数组

    1. <template>
    2.   <div class="hello">
    3.     <a-tree
    4.         :expanded-keys="expandedKeys"
    5.         :auto-expand-parent="autoExpandParent"
    6.         :selected-keys="selectedKeys"
    7.         :tree-data="gData"
    8.         @expand="onExpand"
    9.         @select="onSelect"
    10.         checkable
    11.         v-model="checkedKeys"
    12.     >
    13.       <template slot="title" slot-scope="{ title }">
    14.               <span v-if="title.indexOf(searchValue) > -1">
    15.                 {{ title.substr(0, title.indexOf(searchValue)) }}
    16.                 <span style="color: #f50">{{ searchValue }}</span>
    17.                 {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
    18.               </span>
    19.         <span v-else>{{ title }}</span>
    20.       </template>
    21.     </a-tree>
    22.   </div>
    23. </template>
    24.  
    25. <script>
    26. // json数据如上
    27. import ListData from './data.json'
    28. export default {
    29.   name: 'HelloWorld',
    30.   props: {
    31.     msg: String
    32.   },
    33.   data(){
    34.     return{
    35.       expandedKeys: [],
    36.       autoExpandParent: true,
    37.       gData: [],
    38.       selectedKeys:[],
    39.       checkedKeys: []
    40.     }
    41.   },
    42.   watch: {
    43.     checkedKeys(val) {
    44.       console.log('onCheck', val);
    45.     },
    46.   },
    47.   mounted () {
    48.     // 把树形结构的属性名称换成key,title
    49.     const arr = ListData.result
    50.     const newArr = JSON.parse(JSON.stringify(arr).replace(/roleId/g, 'key').replace(/roleName/g, 'title').replace(/roles/g, 'children').replace(/platformName/g, 'title').replace(/platformId/g, 'key'))
    51.     this.gData = newArr
    52.  
    53.     // 树形转成数组
    54.     const newList = this.arrayToTree(this.gData)
    55.     console.log(newList,'树形转成数组')
    56.   },
    57.   methods: {
    58.     arrayToTree (data) {
    59.       const result = []
    60.       data.forEach(item => {
    61.         const loop = data => {
    62.           result.push({
    63.             key: data.key,
    64.             title: data.title
    65.           })
    66.           const child = data.children
    67.           if (child) {
    68.             for (let i = 0; i < child.length; i++) {
    69.               loop(child[i])
    70.             }
    71.           }
    72.         }
    73.         loop(item)
    74.       })
    75.       return result
    76.     },
    77.     onExpand (expandedKeys) {
    78.       console.log('onExpand', expandedKeys)
    79.       this.expandedKeys = expandedKeys
    80.       this.autoExpandParent = false
    81.     },
    82.     onSelect (selectedKeys, info) {
    83.       console.log('onSelect', info)
    84.       this.selectedKeys = selectedKeys
    85.     },
    86.     onCheck(checkedKeys) {
    87.       console.log('onCheck', checkedKeys);
    88.       this.checkedKeys = checkedKeys;
    89.     },
    90.     onTreeChange (e) {
    91.       // const value = e.target.value
    92.       console.log(e)
    93.       // const expandedKeys = dataList
    94.       //   .map(item => {
    95.       //     if (item.title.indexOf(value) > -1) {
    96.       //       return getParentKey(item.key, gData)
    97.       //     }
    98.       //     return null
    99.       //   })
    100.       //   .filter((item, i, self) => item && self.indexOf(item) === i)
    101.       // Object.assign(this, {
    102.       //   expandedKeys,
    103.       //   searchValue: value,
    104.       //   autoExpandParent: true
    105.       // })
    106.     }
    107.   }
    108. }
    109. </script>

    2.数组转换成树形

    3.递归使用，遍历查找出树形中是否包含某个特定的值（id）

    1. <template>
    2.   <div class="hello">
    3.     <h1>{{ msg }}</h1>
    4.     <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onTreeChange" />
    5.     <a-tree
    6.         :expanded-keys="expandedKeys"
    7.         :auto-expand-parent="autoExpandParent"
    8.         :selected-keys="selectedKeys"
    9.         :tree-data="gData"
    10.         @expand="onExpand"
    11.         @select="onSelect"
    12.         checkable
    13.         v-model="checkedKeys"
    14.     >
    15.       <template slot="title" slot-scope="{ title }">
    16.               <span v-if="title.indexOf(searchValue) > -1">
    17.                 {{ title.substr(0, title.indexOf(searchValue)) }}
    18.                 <span style="color: #f50">{{ searchValue }}</span>
    19.                 {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
    20.               </span>
    21.         <span v-else>{{ title }}</span>
    22.       </template>
    23.     </a-tree>
    24.   </div>
    25. </template>
    26.  
    27. <script>
    28. import ListData from './data.json'
    29. export default {
    30.   name: 'HelloWorld',
    31.   props: {
    32.     msg: String
    33.   },
    34.   data(){
    35.     return{
    36.       expandedKeys: [],
    37.       searchValue: '',
    38.       autoExpandParent: true,
    39.       gData: [],
    40.       selectedKeys:[],
    41.       checkedKeys: []
    42.     }
    43.   },
    44.   watch: {
    45.     checkedKeys(val) {
    46.       console.log('onCheck', val);
    47.       val.map(item => {
    48.         // item相当于id,传的419419609251475533，0等值
    49.         // 根据id查找树形数据中的某个值
    50.         const arr = this.deepQuery(this.gData,item)
    51.         console.log(arr,'arr')
    52.       })
    53.     },
    54.   },
    55.   mounted () {
    56.     // 把树形结构的属性名称换成key,title(修改对象数组里的对象属性名)
    57.     const arr = ListData.result
    58.     const newArr = JSON.parse(JSON.stringify(arr).replace(/roleId/g, 'key').replace(/roleName/g, 'title').replace(/roles/g, 'children').replace(/platformName/g, 'title').replace(/platformId/g, 'key'))
    59.     this.gData = newArr
    60.     
    61.   },
    62.   methods: {
    63.     
    64.     deepQuery (tree, id) {
    65.       var isGet = false
    66.       var retNode = null
    67.       function deepSearch (tree, id) {
    68.         for (var i = 0; i < tree.length; i++) {
    69.           if (tree[i].children && tree[i].children.length > 0) {
    70.             deepSearch(tree[i].children, id)
    71.           }
    72.           if (id === tree[i].key || isGet) {
    73.             tree[i].checkabled = true
    74.             isGet || (retNode = tree[i])
    75.             isGet = true
    76.             break
    77.           }
    78.         }
    79.       }
    80.       deepSearch(tree, id)
    81.       return retNode
    82.     },
    83. onExpand (expandedKeys) {
    84.       console.log('onExpand', expandedKeys)
    85.       this.expandedKeys = expandedKeys
    86.       this.autoExpandParent = false
    87.     },
    88.     onSelect (selectedKeys, info) {
    89.       console.log('onSelect', info)
    90.       this.selectedKeys = selectedKeys
    91.     },
    92.     onCheck(checkedKeys) {
    93.       console.log('onCheck', checkedKeys);
    94.       this.checkedKeys = checkedKeys;
    95.     },
    96.     onTreeChange (e) {
    97.       // const value = e.target.value
    98.       console.log(e)
    99.       // const expandedKeys = dataList
    100.       //   .map(item => {
    101.       //     if (item.title.indexOf(value) > -1) {
    102.       //       return getParentKey(item.key, gData)
    103.       //     }
    104.       //     return null
    105.       //   })
    106.       //   .filter((item, i, self) => item && self.indexOf(item) === i)
    107.       // Object.assign(this, {
    108.       //   expandedKeys,
    109.       //   searchValue: value,
    110.       //   autoExpandParent: true
    111.       // })
    112.     }
    113.   }
    114. }
    115. </script>

    4.递归获取树数据对应的值（获取选中的id的对应的全部拿出来，点击时只能获取到key值，要把key值对应的都拿出来放到数组里）

    1. <template>
    2.   <div class="hello">
    3.     <h1>{{ msg }}</h1>
    4.     <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onTreeChange" />
    5.     <a-tree
    6.         :expanded-keys="expandedKeys"
    7.         :auto-expand-parent="autoExpandParent"
    8.         :selected-keys="selectedKeys"
    9.         :tree-data="gData"
    10.         @expand="onExpand"
    11.         @select="onSelect"
    12.         checkable
    13.         v-model="checkedKeys"
    14.     >
    15.       <template slot="title" slot-scope="{ title }">
    16.               <span v-if="title.indexOf(searchValue) > -1">
    17.                 {{ title.substr(0, title.indexOf(searchValue)) }}
    18.                 <span style="color: #f50">{{ searchValue }}</span>
    19.                 {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
    20.               </span>
    21.         <span v-else>{{ title }}</span>
    22.       </template>
    23.     </a-tree>
    24.   </div>
    25. </template>
    26.  
    27. <script>
    28. import ListData from './data.json'
    29. export default {
    30.   name: 'HelloWorld',
    31.   props: {
    32.     msg: String
    33.   },
    34.   data(){
    35.     return{
    36.       expandedKeys: [],
    37.       searchValue: '',
    38.       autoExpandParent: true,
    39.       gData: [],
    40.       selectedKeys:[],
    41.       checkedKeys: []
    42.     }
    43.   },
    44.   watch: {
    45.     checkedKeys(val) {
    46.       console.log('onCheck', val);
    47.       // 递归获取树数据的对应值
    48.       const arr = this.recursionChild(this.gData, val)
    49.       console.log(arr,'递归获取树数据的对应值')
    50.     },
    51.   },
    52.   mounted () {
    53.     // 把树形结构的属性名称换成key,title(修改对象数组里的对象属性名)
    54.     const arr = ListData.result
    55.     const newArr = JSON.parse(JSON.stringify(arr).replace(/roleId/g, 'key').replace(/roleName/g, 'title').replace(/roles/g, 'children').replace(/platformName/g, 'title').replace(/platformId/g, 'key'))
    56.     this.gData = newArr
    57.     
    58.   },
    59.   methods: {
    60.     /**
    61.      * 获取tree对应code的值
    62.      * arr 值数组
    63.      * data tree数据
    64.      */
    65.     recursionChild (arr, data) {
    66.       const name = []
    67.       let Obj
    68.       data.forEach(res => {
    69.         Obj = arr.find(item => res === item.key)
    70.         if (Obj) {
    71.           name.push(Obj)
    72.           if (Obj.children) data = Obj.children
    73.         }
    74.       })
    75.       return name
    76.     },
    77. onExpand (expandedKeys) {
    78.       console.log('onExpand', expandedKeys)
    79.       this.expandedKeys = expandedKeys
    80.       this.autoExpandParent = false
    81.     },
    82.     onSelect (selectedKeys, info) {
    83.       console.log('onSelect', info)
    84.       this.selectedKeys = selectedKeys
    85.     },
    86.     onCheck(checkedKeys) {
    87.       console.log('onCheck', checkedKeys);
    88.       this.checkedKeys = checkedKeys;
    89.     },
    90.     onTreeChange (e) {
    91.       // const value = e.target.value
    92.       console.log(e)
    93.       // const expandedKeys = dataList
    94.       //   .map(item => {
    95.       //     if (item.title.indexOf(value) > -1) {
    96.       //       return getParentKey(item.key, gData)
    97.       //     }
    98.       //     return null
    99.       //   })
    100.       //   .filter((item, i, self) => item && self.indexOf(item) === i)
    101.       // Object.assign(this, {
    102.       //   expandedKeys,
    103.       //   searchValue: value,
    104.       //   autoExpandParent: true
    105.       // })
    106.     }
    107.   }
    108. }
    109. </script>
    110.

     5.遍历树形结构(Tree)，根据id找到对应的name(递归)

    6.遍历树形结构并返回所有的子节点id值

    1. function lookForAllId(data = [], arr = []) {
    2.     for (let item of data) {
    3.         arr.push(item.id)
    4.         if (item.children && item.children.length) lookForAllId(item.children, arr)
    5.     }
    6.     return arr
    7. }
    8. console.log(lookForAllId(treeData));
    9.  
    10. 首先肯定是需要进行循环的，我使用的是for of循环
    11. 假设tree数据是一个[{},{}]这样类型的
    12. 那么直接将id值push进去就可以了
    13. 如果{}中有children这个字段的话
    14. 我们需要判断是否有children并且长度是否大于0
    15. if (item.children && item.children.length)
    16. 如果有的话
    17. 我们需要自己调用自己并且需要传递参数给自己
    18. 第一个参数肯定被遍历的值；也就是 item.children
    19. 第二个参数是arr,用来需要返回的所有id值
    20. -----------------------------------
    21. js遍历树形结构并返回所有的子节点id值

    7.递归给每一项加一个属性值

    1. function lookForAllId(tree) {
    2.     for (let i = 0; i < tree.length; i++) {
    3.         tree[i].scopedSlots = {title: 'title'}
    4.         if(tree[i].children && tree[i].children.length) {
    5.           this.formatData(tree[i].children)
    6.         }
    7.       }
    8.       return tree;
    9. }
    10. console.log(lookForAllId(tree));
    11.

  • 相关阅读:
    Unity UGUI的Image（图片）组件的介绍及使用
    Lombok详解
    SQL注入的原理分析
    华为机试 - 比较两个版本号的大小
    分布式事务的应用场景
    qt生成帮助文档过程
    VForm3的文件上传方式
    23 张图细讲使用 Devtron 简化 K8S 中应用开发
    JMeter界面和字体的调整
    mlflow详细安装部署
  • 原文地址：https://blog.csdn.net/qq_40055200/article/details/126493131