如果后台返回的菜单数据是一维数组，你可以通过封装的方式将其转换为动态的二维数组。下面是一个示例代码：
// 假设后台返回的菜单数据数组为menuItems
const menuItems = [
{ id: 1, name: 'Dashboard', parentId: null },
{ id: 2, name: 'Products', parentId: null },
{ id: 3, name: 'Orders', parentId: null },
{ id: 4, name: 'Add Product', parentId: 2 },
{ id: 5, name: 'Edit Product', parentId: 2 },
{ id: 6, name: 'View Orders', parentId: 3 },
{ id: 7, name: 'Pending Orders', parentId: 3 }, ];
// 封装函数将一维数组转换为动态二维数组
function transformMenuArray(menuItems) {
const menuMap = new Map(); // 使用Map来存储菜单项，key为菜单项的id
const rootMenu = []; // 存储顶级菜单项
// 遍历一维菜单数组，将菜单项存储到menuMap中
menuItems.forEach((menuItem) => {
menuMap.set(menuItem.id, { ...menuItem, children: [] });
});
// 遍历一维菜单数组，根据parentId将子菜单项添加到父菜单项的children数组中 menuItems.forEach((menuItem) => {
const parent = menuMap.get(menuItem.parentId);
if (parent) {
parent.children.push(menuItem);
} else {
rootMenu.push(menuItem);
}
});
return rootMenu;
}
// 调用封装的函数转换菜单数组
const transformedMenu = transformMenuArray(menuItems); console.log(transformedMenu);
在上面的示例中，我们使用了一个Map来存储菜单项，键为菜单项的id，值为菜单项对象，并在菜单项对象中添加了一个children属性，用于存储子菜单项。然后，我们遍历一维菜单数组，将菜单项存储到menuMap中，并根据parentId将子菜单项添加到父菜单项的children数组中。最后，我们返回顶级菜单项数组，即动态的二维菜单数组。 这样，你就可以将后台返回的一维菜单数组封装为动态的二维菜单数组，便于在Vue 3中进行渲染和展示。在组件中，你可以使用递归或循环的方式来渲染动态二维菜单数组，并实现菜单的展开和收起等功能。
