系统角色

介绍

系统角色页面，左边是管理员角色列表，右边是菜单树形列表，点击左侧角色右侧会显示该角色已勾选菜单。

目录结构

└─ src
   └─ pages
      ├─ role
      │  ├─ components       
      │  └─ RoleModal.vue    # 创建/编辑角色
      └─ index.vue           # 角色权限列表

页面图

源码解析

系统菜单为路由菜单，是项目的路由列表，树形结构，以 el-tree 的形式展示，点击左侧系统角色后，右侧以 √ 的形式展示已选择的菜单。

<!-- 路由/菜单列表 -->
<el-tree
  :data="menus"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
/>

// 设置角色菜单
this.$refs.tree.setCheckedKeys(row.menu_ids);

// 获取选中的菜单 ID 集合
this.$refs.tree.getCheckedKeys();