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删除指定用户