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

Posted 2021-05-17 十九万里

总文章地址：

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权限赋值给一级标签二级标签