扁平化数据解构转化成树形结构

有时候从后台传给前端的是扁平化的数据，但是前端为了生成树状结构数据，需要进行一下转换，下面就是一个将扁平化解构转换成树状结构

     /**
        * @description 将扁平化数据 转换成 树状结构
        * @param {Array} arrayList 扁平化的数据
        * @param {String} pidStr parentId的key名
        * @param {String} idStr id的key名
        * @param {String} childrenStr children的key名
        */
       function fommat({arrayList, pidStr = 'pid', idStr = 'id', childrenStr = 'children'}) {
           let listOjb = {}; // 用来储存{key: obj}格式的对象
           let treeList = []; // 用来储存最终树形结构数据的数组
           // 将数据变换成{key: obj}格式，方便下面处理数据
           for (let i = 0; i < arrayList.length; i++) {
               listOjb[arrayList[i][idStr]] = arrayList[i]
           }
           // 根据pid来将数据进行格式化
           for (let j = 0; j < arrayList.length; j++) {
               // 判断父级是否存在
               let haveParent = listOjb[arrayList[j][pidStr]] 
               if (haveParent) {
                   // 如果有没有父级children字段，就创建一个children字段
                   !haveParent[childrenStr] && (haveParent[childrenStr] = [])
                   // 在父级里插入子项
                   haveParent[childrenStr].push(arrayList[j])
               } else {
                   // 如果没有父级直接插入到最外层
                   treeList.push(arrayList[j])
               }
           }
           return treeList
       }
            

        // 测试数据
        var menu_list = [{
          id: '1',
          menu_name: '设置',
          menu_url: 'setting',
          parent_id: 0
        }, {
          id: '1-1',
          menu_name: '权限设置',
          menu_url: 'setting.permission',
          parent_id: '1'
        }, {
          id: '1-1-1',
          menu_name: '用户管理列表',
          menu_url: 'setting.permission.user_list',
          parent_id: '1-1'
        }, {
          id: '1-1-2',
          menu_name: '用户管理新增',
          menu_url: 'setting.permission.user_add',
          parent_id: '1-1'
        }, {
          id: '1-1-3',
          menu_name: '角色管理列表',
          menu_url: 'setting.permission.role_list',
          parent_id: '1-1'
        }, {
          id: '1-2',
          menu_name: '菜单设置',
          menu_url: 'setting.menu',
          parent_id: '1'
        }, {
          id: '1-2-1',
          menu_name: '菜单列表',
          menu_url: 'setting.menu.menu_list',
          parent_id: '1-2'
        }, {
          id: '1-2-2',
          menu_name: '菜单添加',
          menu_url: 'setting.menu.menu_add',
          parent_id: '1-2'
        }, {
          id: '2',
          menu_name: '订单',
          menu_url: 'order',
          parent_id: 0
        }, {
          id: '2-1',
          menu_name: '报单审核',
          menu_url: 'order.orderreview',
          parent_id: '2'
        }, {
          id: '2-2',
          menu_name: '退款管理',
          menu_url: 'order.refundmanagement',
          parent_id: '2'
        }, {
          id: '2-2-1',
          menu_name: '退款管理2-1',
          menu_url: 'order.refundmanagement',
          parent_id: '2-2'
        }
    ]

    // 输出
    console.log(
           fommat({
               arrayList: menu_list,
               pidStr: 'parent_id'
           })
       )

标签: 树形结构, 数据扁平化, 菜单数据, javascript

填充VueTreeselect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
 
</head>
<body>
    <div id="app">
      <treeselect v-model="value" :multiple="false" :options="options" />
    </div>
</body>
<script>
/**
        * @description 将扁平化数据 转换成 树状结构
        * @param {Array} arrayList 扁平化的数据
        * @param {String} pidStr parentId的key名
        * @param {String} idStr id的key名
        * @param {String} childrenStr children的key名
        */
       function fommat({arrayList, pidStr = 'pid', idStr = 'id', childrenStr = 'children'}) {
           let listOjb = {}; // 用来储存{key: obj}格式的对象
           let treeList = []; // 用来储存最终树形结构数据的数组
           // 将数据变换成{key: obj}格式，方便下面处理数据
           for (let i = 0; i < arrayList.length; i++) {
               listOjb[arrayList[i][idStr]] = arrayList[i]
           }
           // 根据pid来将数据进行格式化
           for (let j = 0; j < arrayList.length; j++) {
               // 判断父级是否存在
               let haveParent = listOjb[arrayList[j][pidStr]] 
               if (haveParent) {
                   // 如果有没有父级children字段，就创建一个children字段
                   !haveParent[childrenStr] && (haveParent[childrenStr] = [])
                   // 在父级里插入子项
                   haveParent[childrenStr].push(arrayList[j])
               } else {
                   // 如果没有父级直接插入到最外层
                   treeList.push(arrayList[j])
               }
           }
           return treeList
       }
            

        // 测试数据
        var menu_list = [{
          id: '1',
          label : '设置',
          menu_url: 'setting',
          parent_id: 0
        }, {
          id: '1-1',
          label : '权限设置',
          menu_url: 'setting.permission',
          parent_id: '1'
        }, {
          id: '1-1-1',
          label : '用户管理列表',
          menu_url: 'setting.permission.user_list',
          parent_id: '1-1'
        }, {
          id: '1-1-2',
          label : '用户管理新增',
          menu_url: 'setting.permission.user_add',
          parent_id: '1-1'
        }, {
          id: '1-1-3',
          label : '角色管理列表',
          menu_url: 'setting.permission.role_list',
          parent_id: '1-1'
        }, {
          id: '1-2',
          label : '菜单设置',
          menu_url: 'setting.menu',
          parent_id: '1'
        }, {
          id: '1-2-1',
          label : '菜单列表',
          menu_url: 'setting.menu.menu_list',
          parent_id: '1-2'
        }, {
          id: '1-2-2',
          label : '菜单添加',
          menu_url: 'setting.menu.menu_add',
          parent_id: '1-2'
        }, {
          id: '2',
          label : '订单',
          menu_url: 'order',
          parent_id: 0
        }, {
          id: '2-1',
          label : '报单审核',
          menu_url: 'order.orderreview',
          parent_id: '2'
        }, {
          id: '2-2',
          label : '退款管理',
          menu_url: 'order.refundmanagement',
          parent_id: '2'
        }, {
          id: '2-2-1',
          label : '退款管理2-1',
          menu_url: 'order.refundmanagement',
          parent_id: '2-2'
        }
    ]

var treedata = fommat({
               arrayList: menu_list,
               pidStr: 'parent_id'
           });
           
    // 输出
    console.log(treedata       )           
       
        // register the component
    Vue.component('treeselect', VueTreeselect.Treeselect)

    new Vue({
      el: '#app',
      data: {
        // define the default value
        value: null,
        // define options
       // options: [ {
       //   id: 'a',
       //   label: 'a',
       //   children: [ {
       //     id: 'aa',
       //     label: 'aa',
       //   }, {
       //     id: 'ab',
       //     label: 'ab',
       //   } ],
       // }, {
       //   id: 'b',
       //   label: 'b',
       // }, {
       //   id: 'c',
       //   label: 'c',
       // } ],
       options:treedata
      },
    })
</script>
</html>