vue电商后台管理系统保姆级教程——角色列表结构功能

Posted 十九万里

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue电商后台管理系统保姆级教程——角色列表结构功能相关的知识,希望对你有一定的参考价值。

总文章地址:

vue.js基础还不会?——看这篇文章就够了

14万字手把手教你做vue电商后台管理(全)——技术栈(vue全家桶 Webpack Git axios Element-ui)

8、角色列表

8.1 通过路由展示角色列表组件

在power中新建一个roles.vue(角色列表)初始化基本结构:
在这里插入图片描述

在路由中加载导入:
在这里插入图片描述
在这里插入图片描述

8.2 绘制基本布局结构并获取列表数据

效果图:
在这里插入图片描述
面包屑导航:
在这里插入图片描述
卡片视图:
在这里插入图片描述
API:
在这里插入图片描述
渲染数据:
定义数据date:
在这里插入图片描述
生命周期函数:
在这里插入图片描述

8.3 渲染角色列表数据

先渲染索引列:
在这里插入图片描述
优化样式:
在这里插入图片描述

在索列之前加和 展开列:
在这里插入图片描述

8.4 说明角色列表需要完成的功能模块

现在还没有具体的样式,后面会写
角色信息的添加,删除功能前面做了,所以这里就不写了

点击对应按钮出现对应的弹出层,然后执行对应的操作。

8.5 分析角色下权限渲染的思路

在展开行中拿到渲染的数据
在请求数据列表中返回了数据children,通过作用域插槽来拿
在这里插入图片描述
实现效果:
在这里插入图片描述
拿到数据之后通过三层for循环渲染出对应的ui结构

8.6 通过第一层for循环渲染一级权限

先做一下栅格布局,区分出三个区域用来放三层for循环:

scope.row是当前对象的数据。 .children 是一级权限的数据, :key每次循环绑定一个唯一的key值,通过插值表达式渲染出数据
在这里插入图片描述
放在el-tag标签中美化样式
在这里插入图片描述

8.7 美化一级权限

思路:
每行之间隔开距离,给每行放一个buttom的边框,第一行放一个top边框(这里使用三元表达判断) 加图标
在这里插入图片描述
每行都放buttom,利用三元表达式,如果i1===0.则bdtop否则空
在这里插入图片描述

8.8 通过二层for循环渲染二级权限

使用栅格布局分出2级权限和3级权限,,方法和之前的一样。
在这里插入图片描述
添加边框 线(上边框)第一个不添加,利用三元表达式判断:
在这里插入图片描述
动态绑定class类,然后判断
在这里插入图片描述
最终效果:
在这里插入图片描述

8.9 通过第三层for循环渲染三级权限

栅格布局:
注使用item2的children
在这里插入图片描述
通过作用域插槽拿到数据 children 拿到子组件数据,通过栅格分隔样式,动态绑定边框值。

8.10 美化角色权限下的UI结构

设置最小宽度:
设置body的最小宽度为1366px
在这里插入图片描述

角色列表设置居中:
定义一个类:哪里用到往哪里加
在这里插入图片描述
最后把代码插槽删了

8.11 点击删除权限按钮弹出确认提示框

使用element组件中的可移除标签属性:
在这里插入图片描述
closable属性:
在这里插入图片描述
绑定点击事件:
removeRightById:
在这里插入图片描述
定义事件:
在这里插入图片描述
然后弹框提示用户是否要删除,使用的还是element组件L

在这里插入图片描述
catch捕获错误:在这里插入图片描述
结果判断用户操作:
在这里插入图片描述
这里只是打印了结果,没有向后端发起请求。

8.12 完成删除角色下指定权限的功能

上一节点击了删除按钮后需要向后端发起删除的请求,删除用户在数据库中的权限:
API:
在这里插入图片描述
发起delect请求:
先把item3.id传进去:
在这里插入图片描述
在处理函数的形参中j接收一下:
在这里插入图片描述
然后再发起delect请求的时候用之前的参数字符串拼接
然后进行判断:
在这里插入图片描述
有个缺点:删除之后展开栏就被关闭了 解决办法:
在这里插入图片描述
把close权限赋值给一级标签二级标签
在这里插入图片描述

以上是关于vue电商后台管理系统保姆级教程——角色列表结构功能的主要内容,如果未能解决你的问题,请参考以下文章

vue电商后台管理系统保姆级教程——权限列表

vue电商后台管理系统保姆级教程——用户列表布局和功能的实现

vue电商后台管理系统保姆级教程(一)——项目概述

vue电商后台管理系统保姆级教程——分类参数

vue电商后台管理系统保姆级教程——商品分类

vue电商后台管理系统保姆级教程——项目初始化