前端学习之vue+element-ui电商项目（四）角色列表_element ui 角色 用户

0. 准备工作

component下新建文件夹power下新建文件Roles.vue，并在路由中引入文件

1.界面布局

1.1 导航界面样式

 <!-- 面包屑导航区域 -->
      <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>
1
2
3
4
5
6

2.角色界面卡片试图

2.1 界面样式

<!-- 卡片视图 -->
      <el-card>
          <!-- 添加角色按钮区 -->
          <el-row>
              <el-col>
                  <el-button type="primary"
                  @click="addDialogVisible = true"
                  >添加角色</el-button>
              </el-col>
          </el-row>
          <!-- 角色列表 -->
          <el-table :data="roleList" border stripe>
              <!-- 展开列 -->
              <el-table-column type="expand">
                  <template slot-scope="scope">
                      <el-row
                      :class="['bdbottom',index1 === 0 ? 'bdtop': '','vcenter']"
                      v-for="(item1, index1) in scope.row.children"
                      :key="item1.id">

                          <!-- 渲染一级权限 -->
                          <el-col  :span="5">
                              <el-tag
                              closable
                              @close="removeRightById(scope.row, item1.id)">{
  { item1.authName}}
                              <i class="el-icon-caret-right"></i>
                              </el-tag>
                          </el-col>
                          <!-- 渲染二级、三级权限 -->
                          <el-col :span="19">
                              <el-row
                              :class="[index2 === 0 ? '':'bdtop','vcenter']"
                              v-for="(item2, index2) in item.children"
                              :key="item2.id">

                              <!-- 渲染二级权限 -->
                              <el-col :span="6">
                                <el-tag
                                type="success"
                                closable
                                @close="removeRightById(scope.row, item2.id)">{
  { item2.authName }}</el-tag>
                                <i class="el-icon-caret-right"></i>
                                </el-col>
                                <!-- 渲染三级权限 -->
                                <el-col :span="18">
                                <el-tag type="warning"
                                closable
                                @close="removeRightById(scope.row, item3.id)"
                                v-for="item3 in item2.children"
                                :key="item3.id">{
  { item3.authName }}</el-tag>
                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53