说明
在业务逻辑中， 往往需要将后端的数据进行格式化
下面代码片是后端给的数据，但在使用el-tree或者是el-cascader时，这种格式数据并不能直接使用，需要进行改造
javascript"> {
"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组件需要改造成的数据格式：
javascript">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: '顶部导航'
}]
}]
},
代码说明
这种树形的代码格式，一般是使用递归方法写
javascript"> // 获取后端接口
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;
},
