在Element Plus框架中,将一维数组转换为树形结构通常涉及到一个转换函数,该函数可以根据数组中每个元素的特定属性(如父ID)来构建层级关系。以下是一个简单的JavaScript函数,用于将具有父子关系的一维数组转换为树形结构:
首先初始化了一个rootItems
数组来存放根节点,以及一个lookup
对象来建立id和对应项的映射。然后,它遍历输入数组中的每一项,根据每一项的id
和parentId
构建出树形结构。
在遍历过程中,函数首先检查lookup
对象中是否已经存在当前项的id,如果不存在则创建一个新的对象,并初始化一个children
数组。然后,它根据parentId
查找父节点,如果找到了父节点,则将当前项添加到父节点的children
数组中;如果找不到父节点(即parentId
为null
),则将当前项作为根节点添加到rootItems
数组中。
function arrayToTree(items) { const rootItems = []; const lookup = {}; for (const item of items) { const itemId = item.id; const parentId = item.parentId; if (!lookup[itemId]) lookup[itemId] = { ['children']: [] }; lookup[itemId] = { ...item, children: lookup[itemId]['children'] }; const parent = parentId ? lookup[parentId] : null; if (parent) { if (!parent.children) parent.children = []; parent.children.push(lookup[itemId]); } else { rootItems.push(lookup[itemId]); } } return rootItems; } // 示例使用 const items = [ { id: 1, title: 'Item 1', parentId: null }, { id: 2, title: 'Item 2', parentId: 1 }, { id: 3, title: 'Item 3', parentId: 1 }, { id: 4, title: 'Item 4', parentId: 2 }, { id: 5, title: 'Item 5', parentId: 3 }, ]; const tree = arrayToTree(items); console.log(tree);
在这个例子中,arrayToTree
函数接受一个具有id
和parentId
属性的一维数组items
。函数创建了一个lookup
对象,用于快速查找和构建层级关系。最后,它返回了一个根元素列表rootItems
,这个列表代表了树的根部。