单层数据转树状结构数据

1.新建transformDataTree.js文件

//menuList为要转换的数组
//parent_id父id
//permission_id自己的id
export function transformData(menuList) {
	// 标记叶子节点
	menuList.map(item => {
		if (!menuList.some(subMenuItem => subMenuItem.parent_id === item.permission_id)) {
			item.isLeafNode = true
		}
	})

	return buildMenus(menuList)

}
function buildMenu(menu, menuList, menuIds) {
	let nextLayer = []
	for (let i = menu.length - 1; i > -1; i--) {
		const currentMenu = menu[i]
		const subMenu = menuList.filter(item => {
			if (item.parent_id === currentMenu.permission_id) {
				menuIds.push(item.permission_id)
				return true
			}
		})
		nextLayer = nextLayer.concat(subMenu)
		currentMenu.children = subMenu
	}
	if (nextLayer.length) {
		buildMenu(nextLayer, menuList, menuIds)
	}
}

function getParentIds(menuItem, menuList) {
	const parentArr = []
	let currentItem = menuItem
	while (currentItem && currentItem.parent_id) {
		parentArr.push(currentItem.parent_id)
		currentItem = menuList.find(item => item.permission_id === currentItem.parent_id)
	}
	return parentArr
}

function buildMenus(menuList, trim = true) {
	// 保证父子级顺序
	menuList = menuList.sort(function(a, b) {
		const parentIdsA = getParentIds(a, menuList)
		const parentIdsB = getParentIds(b, menuList)
		if (parentIdsA.includes(b.permission_id)) {
			return 1
		}
		return parentIdsA.length - parentIdsB.length || a.sort - b.sort
	})
	// 删除无subMenu且非子节点的菜单项
	if (trim) {
		for (let i = menuList.length - 1; i > -1; i--) {
			const currentMenu = menuList[i]
			const subMenu = menuList.filter(subMenuItem => subMenuItem.parent_id === currentMenu.permission_id)
			if (!currentMenu.isLeafNode && !subMenu.length) {
				menuList.splice(i, 1)
			}
		}
	}
	const menuIds = []
	const menu = menuList.filter(item => {
		if (!item.parent_id) {
			menuIds.push(item.permission_id)
			return true
		}
	})
	buildMenu(menu, menuList, menuIds)
	// 包含所有无效菜单
	if (!trim && menuIds.length !== menuList.length) {
		menu.push(...menuList.filter(item => !menuIds.includes(item.permission_id)))
	}
	return menu
}

2.页面中使用

import {
		transformData
	} from '@/common/transformDataTree.js'

const treeData = transformData(data);