ElementUi实现侧边栏动态生成（可无限层级展开）

后端返回的数据格式

 [{icon: "el-icon-s-home",id: "3964aacd-df2b-4172-89eb-6e4af50cd216",name: "测试1-1",pid: "8f51c44d-994d-4697-930c-c5539a9515f5",url: "/testOne-one"},{icon: "el-icon-s-data\r\n",id: "8f51c44d-456a-8asa-153a-83d563fce6b9",name: "测试2-1",pid: "d3217b03-48cb-40a8-89bd-83d563fce6b9",url: "/testTwo-two"},{icon: "el-icon-user-solid\r\n",id: "8f51c44d-994d-4697-930c-c5539a9515f5",name: "测试1",pid: "null",url: "/testOne"},{icon: "el-icon-star-on",id: "d3217b03-48cb-40a8-89bd-83d563fce6b9",name: "测试2",pid: "null",url: "/testTwo"},{icon: "el-icon-s-marketing\r",id: "d3217b03-as5a-12ad-89bd-6e4af50cd216",name: "测试1-1-1",pid: "3964aacd-df2b-4172-89eb-6e4af50cd216",url: "/testOne-one-one"}]

转成el-menu需要的格式

[{"icon": "el-icon-user-solid\r\n","id": "8f51c44d-994d-4697-930c-c5539a9515f5","pid": "null","name": "测试1","url": "/testOne","children": [{"icon": "el-icon-s-home","id": "3964aacd-df2b-4172-89eb-6e4af50cd216","pid": "8f51c44d-994d-4697-930c-c5539a9515f5","name": "测试1-1","url": "/testOne-one","children": [{"icon": "el-icon-s-marketing\r","id": "d3217b03-as5a-12ad-89bd-6e4af50cd216","pid": "3964aacd-df2b-4172-89eb-6e4af50cd216","name": "测试1-1-1","url": "/testOne-one-one"}]}]},{"icon": "el-icon-star-on","id": "d3217b03-48cb-40a8-89bd-83d563fce6b9","pid": "null","name": "测试2","url": "/testTwo","children": [{"icon": "el-icon-s-data\r\n","id": "8f51c44d-456a-8asa-153a-83d563fce6b9","pid": "d3217b03-48cb-40a8-89bd-83d563fce6b9","name": "测试2-1","url": "/testTwo-two"}]}
]

自定义封装方法 utils ---> arrayToTree.ts

// 数组转树结构
function sortArr(a: any, b: any) {return a.orderNum - b.orderNum;
}export function arrayToTree(list: object[], callback: any = () => {}, props = { id: 'id', pid: 'pid', children: 'children' }) {list.sort(sortArr);const tree: object[] = [];const map: any = {};// list = cloneObj(list);const listLength = list.length;for (let i = 0; i < listLength; i++) {const node: any = list[i];const nodeId: any = node[props.id];map[nodeId] = node;callback(node);}for (let i = 0; i < listLength; i++) {const node: any = list[i];const nodePid: any = node[props.pid];const parentNode: any = map[nodePid];if (parentNode) {parentNode[props.children] = parentNode[props.children] || [];parentNode[props.children].push(node);} else {tree.push(node);}}return tree;
}

封装侧边栏组件 sideBar.vue

需要的地方使用sideBar.vue

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！