电商后台管理系统-权限管理模块

权限管理

引言

权限管理模块一共包括两个子组件，一个角色列表组件和权限列表组件，首先说一下角色列表实现的内容。

1.角色列表

角色列表的组织结构如图1所示

图1 角色列表

由图1可以看出，角色列表的顶部是由面包屑导航构成的，内容部分包括在卡片视图区中，由于之前已经将面包屑导航和卡片视图区封装好，这里只需引入即可， 重点主要在卡片视图区的内容，首先引入elementui库中的按钮标签，下面就是表格标签，用来展示请求到的数据。表格第一列是以个展开列，添加type="expand",第二列是索引列，添加type="index"实现。角色名称和角色描述绑定请求到的数据，最后一列的操作引入3个按钮标签方别实现点击对应的按钮实现对应的功能。

1.1 获取列表数据

首先利用get请求获取到对应的列表数据，由于各种请求方法已经封装，需要的时候按需引入即可，引入各种请求代码如下：

//引入方法
import {getRequest,postRequest,putRequest,deleteRequest} from '../../../network/

在methods中定义方法，并且在created()中调用，代码如下：

methods中的定义：

//1.获取表格中的角色列表数据
      getRoleList(){
        getRequest('/roles').then(res=>{
            console.log(res);
            if(res.data.meta.status!==200){
                return this.$message.error('获取角色列表失败');
            }
            //如果获取角色列表成功
            this.roleList = res.data.data;
        })
      }

在created中调用

created(){
      this.getRoleList();
    }

由此获取到对应的列表数据。

第一列中的展开栏数据也需要获取，根据图1可知，展开列中的数据分为3级，分别用el-tag进行展示，最右侧在添加一个向右的小图标，这些数据只需要在展开列中定义作用域插槽template，每一级遍