码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2021-06-02 17:15:06      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:mode   sed   ble   用户   edit   model   路由   方法   作用   

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

技术图片

技术图片

 

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

标签:mode   sed   ble   用户   edit   model   路由   方法   作用   

原文地址:https://www.cnblogs.com/zjqzilq/p/14828001.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!