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

菜单的 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动态加载组件了。

菜单的模板

  <el-menu
    ref="domMenu"
    :default-active="index"
    class="el-menu-vertical-demo"
    @select="select"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-submenu
      v-for="item in menu.filter(a => a.parentId===0)"
      :key="'menu_' + item.id"
      :index="item.id"
    >
      <template #title>
        <i :class="item.icon"></i>
        <span>{{item.title}}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item
          v-for="item2 in menu.filter(a => a.parentId===item.id)"
          :key="'submenu_' + item2.id"
          :index="item2.id"
        >{{item2.title}}
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>

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

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

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

模块的各种表现形式

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

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

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

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