黑马程序员视频_用户列表开发
目录
用户列表开发
一.创建用户列表组件
二.在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中导入组件,然后全局注册
效果:
改一下文字并删掉一个