expres+mysql+vue sys_menu 表父级id:parent_id和子级id: childLevel_id 把表数据扁平化转成树形
时间: 2024-09-24 12:16:49 浏览: 60
在Express、MySQL和Vue.js的应用中,将`sys_menu`表的数据从嵌套的父子关系扁平化转换成树形结构通常涉及以下几个步骤:
1. **数据库查询**:
使用SQL查询获取`sys_menu`表中的数据,包括父级菜单ID(parent_id)和子级ID(childLevel_id)。假设`parent_id = 0`表示根节点。
```sql
SELECT id, parent_id, childLevel_id FROM sys_menu WHERE parent_id = 0 OR parent_id IS NULL;
```
2. **递归处理**:
因为数据是嵌套的,所以需要遍历结果,并使用递归的方式来构建树形结构。这通常会在Node.js后端(例如Express API)中完成,利用JavaScript的函数式特性或循环。
```javascript
async function getTreeData(menuList) {
const treeData = [];
for (const menu of menuList) {
const node = { ...menu, children: [] };
let parentId = menu.parent_id;
// 查找父节点并将其添加到子节点列表
while ((parentId !== 0) && (treeData.find(item => item.id === parentId))) {
const parentNode = treeData.find(item => item.id === parentId);
parentNode.children.push(node);
parentId = parentNode.parent_id;
}
// 如果找不到父节点,则它就是根节点
if (parentId === 0) {
treeData.push(node);
} else {
treeData.find(item => item.id === parentId).children.push(node);
}
}
return treeData;
}
```
3. **返回给前端**:
将处理后的树形数据通过API接口发送给Vue.js应用。在Vue中,你可以使用`v-for`和递归来渲染这种树形结构。
4. **Vue组件展示**:
在Vue组件中,可以使用组件化的方式,如`<ul>`和`<li>`标签配合`v-for`,或者使用专门的树形组件库(如Element UI的`el-tree`)来展示这个树状数据结构。
阅读全文