构建Element UI树状菜单数据结构：从list到JSON树详解

在Element UI中，构建树状菜单的数据结构是一个常见的任务，特别是在处理数据库中的菜单数据时，由于其通常以二维表格形式存在，需要将这种列表（list）转换为适合树形结构（tree）。Element UI的树状菜单通常期望的数据结构包含以下四个主要属性：id（用于唯一标识节点）、label（节点的显示文本）、newVal（可能用于保存额外的值），以及一个children数组，用于表示节点之间的层级关系。 数据库中的菜单数据，例如： ```javascript var itemlist = [ { itemCode: '11', itemName: '材料11', itemType: '2', parentPk: '1' }, { itemCode: '111', itemName: '材料111', itemType: '3', parentPk: '11' }, { itemCode: '1111', itemName: '材料1111', itemType: '3', parentPk: '111' }, { itemCode: '1112', itemName: '材料1112', itemType: '3', parentPk: '111' } ] ``` 这个列表中的`parentPk`字段定义了子节点与父节点的关系。为了构造符合Element UI树状菜单需求的`treeData`结构，可以使用递归的方法。递归的关键在于遍历列表，将每个节点与其父节点关联起来，形成嵌套的children数组。 下面是一个递归函数的示例： ```javascript function buildTree(itemList, root) { for (let item of itemList) { if (!item.parentPk || item.parentPk === root.id) { let newNode = { id: item.itemCode, label: item.itemName, itemType: item.itemType, newVal: '', // 如果有需要，可以在这里处理newVal属性 children: [] }; if (item.children) { buildTree(item.children, newNode); } root.children.push(newNode); } } return root; } // 初始化空的根节点 var itemtree = { id: '1', label: '物料名称_整机', children: [] }; // 调用递归函数，将itemlist转换为treeData itemtree = buildTree(itemlist, itemtree); // 现在itemtree对象包含了所需的树状结构 ``` 通过这段代码，我们创建了一个名为`itemtree`的变量，它包含了所有材料的层级结构，每个节点都有对应的id、label和children数组。这样，你就可以将这个结构传递给Element UI的tree组件，实现动态的树状菜单展示。 总结来说，构建Element UI树状菜单的数据结构涉及从二维表格形式的数据中提取父子关系，并将其转换为树形结构，这需要用到递归算法来处理嵌套层次。在实际应用中，确保对节点属性和层级关系的正确理解和处理至关重要。