后台管理系统【角色列表】

最新推荐文章于 2023-07-13 14:57:26 发布

VIP文章前端念初

最新推荐文章于 2023-07-13 14:57:26 发布

阅读量709

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_62765236/article/details/127233775

版权

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

      <!-- B卡片视图 -->
      <el-card>
          <!-- a添加角色按钮区域 -->
          <el-row>
              <el-col>
                  <el-button type="primary" @click="addDialogVisible = true">添加角色 
                  </el-button>
              </el-col>
          </el-row>
          <!-- b角色列表区域 -->
          <el-table :data="rolelist" border stripe>
             <!-- 1展开列 -->
             <el-table-column type="expand">
                   <template slot-scope="scope">
                     <!-- children:当前角色的所有权限 -->
                       <el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for=" 
                                      (item1,i1) in scope.row.children" :key="item1.id">
                         <!-- 渲染一级权限   这里用数组来放类名，不能用字符串类 
                                              名，:class会把后面当成js表达式解析 -->
                         <el-col :span="5">
                           <el-tag closable @close="removeRightById(scope.row,item1.id)"> 
                              {
  {item1.authName}}
                           </el-tag>
                           <i class="el-icon-caret-right"></i>
                         </el-col>
                         <!-- 渲染二级和三级权限 -->
                         <el-col :span="19" class="erji">
                           <!-- 通过for 循环 嵌套渲染二级菜单 -->
                           <el-row :class="[i2===0?'':'bdtop','vcenter']" v-for=" 
                                         (item2,i2) in item1.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" v-for="(item3,i3) in item2.children" :key="item3.id" closab