电商管理系统-用户管理界面

1、主页布局

 

 2、路由跳转

通过 v-for 双层循环分别进行一级菜单和二级菜单的渲染，菜单开启router后，index可跳转到相应的路由组件。

3、用户信息列表布局

面包屑导航：el-breadcrumb

信息容器(包含标题，内容和操作)：el-card

栅格布局的使用： el-row、el-col

表格布局的使用：el-table、el-pagination 

4、用户状态列（作用域插槽的使用）

定义一个插槽，slot-scope接收当前作用域的数据，scope.row拿到整行的数据。

 5、列表显示

定义一个userList，向后台发送数据，用户列表区域采用prop属性进行数据读取渲染。 

表格数据分页页码条的使用（el-pagination）

① 当前页码：pagenum

② 每页条数：pagesize

③ 记录总数：total

 

 

6、搜索用户功能

点击搜索按钮向后台发起请求：getUserList

 7、添加用户功能

采用el-dialog以及el-form，el-form中需要对表单中的数据进行验证，所以使用rules属性，采用model双向绑定数据，addDialogClosed方法用于再次打开是初始化界面。

 

 

 8、修改用户功能

向后台发送请求用户信息请求，editUserInfo方法用于修改用户数据向后台发送请求。

 

9、删除用户功能

removeUserById方法根据id删除指定用户