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

posted on 2021-05-30 14:57  李起桉  阅读(460)  评论(0编辑  收藏  举报