标题：电商后台管理系统——角色列表

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

潇潇的雨幕里

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

阅读量1.2k

点赞数

分类专栏：电商后台管理项目-----VUE 文章标签： javascript vue.js node.js es6 css3

本文链接：https://blog.csdn.net/pp_46918/article/details/108965587

版权

该博客详细介绍了电商后台管理系统中角色列表的实现过程，包括添加角色路由和子组件、面包屑导航、数据展示、权限列表生成、权限删除功能、权限分配功能以及树形结构弹窗的创建。重点讨论了权限列表的样式美化和权限删除后的数据更新策略。

摘要由CSDN通过智能技术生成

标题：电商后台管理系统——角色列表

在这里插入图片描述
A.添加角色列表路由
添加角色列表子组件（power/Roles.vue），并添加对应的规则
B.添加面包屑导航
在Roles.vue中添加面包屑组件展示导航路径

<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-->
    	<!-- 添加角色按钮区域 el-row->el-col->el-button-->
    <!-- 分配权限的对话框 el-dialog-->
</div>
</template>

栅格布局使用row和col组件设置添加角色按钮的位置

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

C.显示数据
在data中添加一个roleList数据，在methods中提供一个getRoleList方法发送请求获取权限列表数据，在created中调用这个方法获取数据

<!-- 角色列表区域 -->
<!-- row-key="id" 是2019年3月提供的新特性，
if there's nested data, rowKey is required.
如果这是一个嵌套的数据，rowkey 是必须添加的属性 -->
<el-table row-key="id" :data="roleList" border>
    <!-- 添加展开列 -->
    <el-table-column type="expand">
		<!-- 插槽中放置权限列表 -->
	</el-table-column>
    <el-table-column type="index"></el-table-column>
    <el-table-column label="角色名称" prop="roleName"></el-table-column>
    <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
    <el-table-column label="操作" width="450px">
        <template slot-scope="scope"> 
            <el-button size="mini" type="primary" i