前端做权限控制角色展现思路

核心思路

1. 点击左侧角色列表拿到激活角色roleId

2. 使用角色roleId获取当前角色对应的权限点数组列表

3. 在权限树形组件中完成高亮

4. 组件初始化时完成第一个角色对应的Tree高亮

在el-tree调用setCheckedKeys方法，完成回显高亮

// 高亮权限列表
  const treeComponentList = this.$refs.tree
  // 调用setCheckedKeys方法
  treeComponentList.forEach((tree, index) => {
    tree.setCheckedKeys(this.perms[index])
  })

页面一开始加载的时候展现第一个角色

用到await异步，否则读取不到

例子：

// 生命周期里先以第一项roleId获取
async mounted() {
  // 先获取角色列表和可选权限列表
  await this.getRoleList()
  await this.getTreeList()
  // 再获取当前角色下的权限列表
  this.getRoleDetail(this.roleList[0].roleId)   
}