0
点赞
收藏
分享

微信扫一扫

Codeforces Round 935 (Div. 3)(A,B,C,D,E,F)

绣文字 03-23 21:00 阅读 2

说明

在业务逻辑中, 往往需要将后端的数据进行格式化
下面代码片是后端给的数据,但在使用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;
    },
举报

相关推荐

0 条评论