2021-08-23 1.2 模块菜单

后台管理，一般需要一个菜单导航，有横向的，也有纵向的。如果项目非常复杂，可以把一级模块做成横向的导航，然后二级和三级模块做成纵向的导航。

菜单的 meta

参考 el-menu 的属性，我们可以设计一个这样的结构：

{
  "title": "演示项目",
  "menu": [
    {
      "id": 100,
      "parentId": 0,
      "title": "系统管理",
      "componentKind": "group",
      "icon": "el-icon-location"
    },
    {
      "id": 101,
      "parentId": 0,
      "title": "支持平台",
      "kind": "group",
      "componentKind": "group",
      "icon": "el-icon-location"
    },
    {
      "id": 120,
      "moduleFlag": "120-role",
      "parentId": 100,
      "title": "角色管理",
      "componentKind": "list",
      "icon": "el-icon-location"
    },
    {
      "id": 121,
      "moduleFlag1": "121-log",
      "parentId": 100,
      "title": "操作日志",
      "componentKind": "list",
      "icon": "el-icon-location"
    },
    {
      "id": 122,
      "moduleFlag1": "122-log",
      "parentId": 100,
      "title": "变更日志",
      "componentKind": "list",
      "icon": "el-icon-location"
    }
  ]
}

• title
  因为 json 文件不能写注释，但是不写点啥有不容易看出来这个json是干啥的，所以就加了这个 title，说明一下这个json 是做啥用的。

• menu
  存放菜单需要的属性，这里没有采用 “套娃”的方式，而是采用关系型数据库的 parentID 的形式，还是感觉这样方便一些。

• menu.title
  菜单的标题。

• menu.componentKind
  指的是要加载的组件的key，为了便于扩展，把需要加载的组件做成异步组件，做成 key-value 的形式，这里记录 key，然后就可以按照key动态加载组件了。

菜单的模板

  
    
      
      
        {{item2.title}}
        
      
    
  

一般做成二级菜单就可以了，所以代码也比较方便，写死二级就好。
先 v-for 出来第一级菜单，然后用 parentID 过滤出来二级菜单，两层 v-for 搞定。

原来使用 vue 的路由 router 实现功能，然后为了更好地保持状态，以及切换时的速度，做了一点修改，但是最后发现，有点麻烦，还不如来点简单粗暴的。

于是就做成了这样。于是无奈，还得自己做个路由。

模块的各种表现形式

编辑模块的时候希望有一个树状的表格，这样便于维护。

选择模块的时候，希望有一个可以递进的下拉列表，或者级联形式，那么就需要做一下结构转换。

我们可以写个函数来实现。

整理了一天的代码，进度基本原地没动。但是不整理又不行。。。