文章目录
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>
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>