本文详细介绍了如何使用Vue.js和Element-UI开发一个电商后台的用户列表组件，包括创建组件、设置路由、高亮菜单、绘制UI结构、实现搜索、添加、修改、删除用户功能，以及数据分页和角色分配等操作。内容涵盖了面包屑导航、卡片视图、搜索框、表格渲染、表单验证和API交互等多个环节。
目录
用户列表开发
点击用户列表，右侧显示用户列表的组件
一.创建用户列表组件
二.在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.卡片视图区域
复制粘贴到users组件，在plugins/element.js中导入并注册
效果：
覆盖默认样式，我们在全局样式表中写样式比较好，给面包屑导航设置一个下外边距
给卡片设置阴影
效果：
3.搜索与添加区域
复制粘贴到卡片视图中，删除一些不需要的
效果：
使用栅格系统绘制固定宽度
创建一行两列，列占多宽，使用span属性，然后将搜索区域放进第一列里，还需要在plugins/element.js中导入并注册组件，
效果：
将添加用户按钮添加到第二列
最低0.47元/天 解锁文章
8772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
