100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统-用户列表制作

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

时间:2021-10-06 08:16:38

相关推荐

黑马程序员课程-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.卡片视图区域

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。