vue-shop之主页制作-权限管理|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第6天

• 权限列表：created 只要页面一创建则渲染出表格 因此需要请求数据

  • 在level制作中需要根据用户的level值渲染Tag标签 因此再次使用插槽
  • 使用v-if v-elseif判断用户等级来确定展示在页面中的Tag标签

• 角色列表：与权限管理相同只要一加载页面即需渲染页面

• 权限列表 ：请求角色列表时 返回数据中的children中存放的即为用户对应的权限 因此通过插槽地形式可获取到数据

  • 通过三层for循环依次渲染三级权限
  • el-row(行标签)标签中放两个el-col(列标签) 分别放置一级权限和二三级权限
  • 补充layout布局中可以通过：span来规定所占位置大小 默认总共分为24列 如若要分为三列可以先分为两列再将第二列中分为两列
  • 动态绑定多个类名时需将多个类名写在数组中
  • 删除权限：首先使用tag可移除标签
  • 为了使删除后仍停留在原来的页面而不是将整个页面重新刷新 因此不建议重新请求角色列表数据
  • 由于删除角色请求返回数据为用户最新权限数据 因此只需响应的data赋值给渲染页面时所用的数据的children即可 因此传递参数时不能只将id传入而是整个数据 即scope.row

• 分配权限

  • 点击分配权限则展示出所有的权限

  • 定义一个递归函数来获取角色拥有的权限的id

  • 再点击权限分配按钮时的回调函数中调用此递归函数来获得三级权限的id并将此idpush到定义的数组中

     getRightId (node, arr) {
          if (!node.children) return arr.push(node.id)
          node.children.forEach(item => {
            this.getRightId(item, arr)
          })
        }
    

  • 但需要在点击其他角色的权限分配按钮前清空数组否则数组中将存有其他角色拥有的权限的id

  • 为dialog绑定close事件每当dialog关闭时清空数组

  • 为角色分配权限：

    • 为角色分配权限时需向后台发送所有被选中和半选中状态的按钮 因此需为树形控件绑定ref属性获取到树形控件通过调用其getCheckedNodes和getHalfCheckedNodes方法获取选中的节点和半选中的节点 组成的数组 并定义一个数组接收并合并这两个数组
    • 由于无法直接拿到id因此需要在弹出选择权限的对话框时就将id存到自定义的一个数据中

  • 为用户分配角色 注：dialog表单一定要注意是否需要close事件重置表单