https://www.cnblogs.com/slongs/p/10881729.html
扁平化数据解构转化成树形结构
有时候从后台传给前端的是扁平化的数据，但是前端为了生成树状结构数据，需要进行一下转换，下面就是一个将扁平化解构转换成树状结构
/**
* @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'
})
) 填充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>
