黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统-用户列表制作

黑马程序员视频_用户列表开发

目录

用户列表开发

一.创建用户列表组件

二.在router/index.js导入用户列表组件

三. 设置二级菜单点击时高亮

四.绘制用户列表的基本UI结构

1.头部面包屑导航区

2.卡片视图区域

 3.搜索与添加区域

 4.获取用户列表数据

 5.渲染用户列表数据

 五.搜索功能

          六.添加用户功能

七.修改用户信息

 八.删除用户

九.分配角色

十.提交代码

用户列表开发

点击用户列表，右侧显示用户列表的组件

一.创建用户列表组件

二.在router/index.js导入用户列表组件

设置为Home的子路由

 效果：

三. 设置二级菜单点击时高亮

在Home.vue设置default-active属性

思路：点击链接时，需要把链接的地址保存在sessionStorage，刷新页面时，可以从sessionStorage中取出值，动态赋值给el-menu的default-active属性

给二级菜单都绑定一个单击事件，把path存储起来

 点击用户列表，出现activePath

在data中创建一个空的activePath，

当刷新页面时，页面加载时，就将保存在sessionStorage的地址赋值给activePath

 我们再将activePath动态绑定给default-active

四.绘制用户列表的基本UI结构

1.头部面包屑导航区

 将代码复制到user组件中

 在plugins/element.js中导入组件，然后全局注册

 效果：

 改一下文字并删掉一个

2.卡片视图区域

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！