说明

在业务逻辑中， 往往需要将后端的数据进行格式化
下面代码片是后端给的数据，但在使用el-tree或者是el-cascader时，这种格式数据并不能直接使用，需要进行改造

 {"id": 8750,"name": "监控大屏","sort": 10,"path": "monitor","component": "layout","type": 0,"permission": "","componentName": "","icon": "icon-a-yunyingtongji2x","cache": false,"hidden": false,"pid": 0,"iframeSrc": "","children": [{"id": 8751,"name": "大屏","sort": 1601,"path": "bigScreen","component": "monitor/BigScreen","type": 1,"permission": "monitor:overview","componentName": "","icon": "","cache": false,"hidden": false,"pid": 8750,"iframeSrc": "","children": [{"id": 8803,"name": "导出","sort": 160101,"path": "","component": "","type": 2,"permission": " monitor-overview:export","componentName": "","icon": "","cache": false,"hidden": true,"pid": 8751,"iframeSrc": "","children": null,"createTime": "2024-01-11 14:45:44","description": "","subSystem": "","iframe": false}],"createTime": "2023-04-18 17:04:38","description": "","subSystem": "","iframe": false},{"id": 8753,"name": "大屏设置","sort": 1602,"path": "screenconfig","component": "monitor/ScreenConfig.vue","type": 1,"permission": "monitor:config","componentName": "","icon": "","cache": false,"hidden": false,"pid": 8750,"iframeSrc": "","children": [{"id": 8801,"name": "保存","sort": 160201,"path": "","component": "","type": 2,"permission": "monitor:save","componentName": "","icon": "","cache": false,"hidden": true,"pid": 8753,"iframeSrc": "","children": null,"createTime": "2024-01-11 14:44:29","description": "","subSystem": "","iframe": false}],"createTime": "2023-04-21 11:50:06","description": "","subSystem": "","iframe": false}],"createTime": "2023-04-18 16:57:28","description": "","subSystem": "","iframe": false},

el-cascader组件需要改造成的数据格式：

options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '设计原则',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反馈'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '导航',children: [{value: 'cexiangdaohang',label: '侧向导航'}, {value: 'dingbudaohang',label: '顶部导航'}]}]},

代码说明

这种树形的代码格式，一般是使用递归方法写

 // 获取后端接口async getModuleList() {let treeDetail = [];await GetMenusTreeDetail().then((res) => {treeDetail = res.data;});treeDetail.forEach((item) => {this.treeList.push(this.getModuleObject(item));});},
// 递归构建功能模块对象 return的格式可以根据业务要求来getModuleObject(obj) {if (!obj.children)return {id: obj.id,name: obj.name,children: null,};const temp = {id: obj.id,name: obj.name,children: [],};obj.children.forEach((item) => {temp.children.push(this.getModuleObject(item));});return temp;},