Element电商项目实践之权限列表的开发

权限功能开发

创建新分支 rights

git checkout - b rights

git push -u origin right

新建Components/power/Rights.vue

在router/index.js

基本布局开发

面包屑el-breadcrumb 和卡片视图el-card

代码

<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card> 123 </el-card>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped></style>

请求权限列表数据

请求路径 rights/:type

请求方法： get

请求参数

代码：

export default {
  data() {
    return {
      //权限列表
      rightslist: [],
    }
  },
  created() {
    //获取所有权限
    this.getRightsList()
  },
  methods: {
    async getRightsList() {
      const { data: res } = await this.$http.get('rights/list')
      if (res.meta.status !== 200) {
        return this.$message.error('获取权限列表失败')
      }
      this.rightslist = res.data
      console.log(this.rightslist)
    },
  },
}

将获取的权限列表数据，渲染成表格

el-table :data绑定数据源，el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽

代码：

   <el-card>
      <el-table :data="rightsList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="权限名称" prop="authName"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="权限等级" prop="level"></el-table-column>
        </el-table>
    </el-card>

加入Tag标签

el-tag

通过Type可以改变tag的样式

通过v-if将对应的权限等级渲染出来

代码：

 <template slot-scope="scope">
            <el-tag v-if="scope.row.level === '0'">一级权限</el-tag>
            <el-tag type="success" v-else-if="scope.row.level === '1'">二级权限</el-tag>
            <el-tag type="warning" v-else>三级</el-tag>
          </template>

权限管理业务分析

通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色控制不同的功能权限

把权限分配给不同的角色，把角色分配给不同的用户，只要用户用户拥有了这个角色，也就拥有了这个角色下的所有权限

实现角色列表的路由切换

power文件夹下新建Roles.vue

添加路由

实现角色列表的基本布局

el-card el-row el-col el-button

代码：

    <!-- 卡片视图 -->
    <el-card>
        <!-- 添加角色按钮区 -->
      <el-row
        ><el-col>
          <el-button type="primary"> 添加角色</el-button></el-col
        ></el-row
      >
        <!-- 角色列表区 -->
    </el-card>

获取数据

代码：

export default {
  data() {
    return {
      //所有角色列表数据
      rolelist: [],
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    async getRolesList() {
      const { data: res } = await this.$http.get('roles')
      if(res.meta.status !== 200) {
          return this.$message.error('获取角色列表失败')
      }
      this.rolelist = res.data
      console.log(this.rolelist)
    },
  },
}

效果

渲染数据

el-tabledata绑定数据源，prop属性来对应对象中的键名即可填入数据

加两列，展开列type设置为expand，索引列type设置为index

展开列展开之后的渲染方式

通过v-for渲染

代码：

 <!-- 展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row
              :class="[bdbottom, i1 === 0 ? 'bdtop' : '']"
              v-for="(item1, i1) in scope.row.children"
              :key="item1.id"
            >
              <!-- 渲染一级权限 -->
              <el-col :span="5"
                ><el-tag>{{ item1.authName }}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- 渲染二级和三级权限 -->
              <el-col :span="19">
                <!-- 通过for循环 嵌套渲染二级权限 -->
                <el-row
                  :class="[bdbottom, i2 === 0 ? 'bdtop' : '']"
                  v-for="(item2, i2) in item1.children"
                  :key="item2.id"
                >
                  <el-col
                  :span="6"
                    ><el-tag type="success">{{ item2.authName }}</el-tag
                    ><i class="el-icon-caret-right"></i
                  ></el-col>
                  <el-col :span="18">
                    <el-tag
                    type="warning"
                      v-for="(item3, i3) in item2.children"
                      :key="item3.id"
                      >{{ item3.id }}</el-tag
                    >
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>