Vue 后台管理项目12-用户列表页实现

用户列表页实现

1.完成user组件静态布局

页面结构：组件盒子内分五部分，顶级面包屑（全局组件）+ 操作框 + 用户数据列表 + 底部的分页 + 用户增删改弹框（后面写动态交互再添加），都用el-row(饿了吗Layout 布局)包裹

image

Ⅰ.顶级面包屑的实现：参照前两章

Ⅱ.操纵框：
饿了吗组件 复合型输入框传送们http://element-cn.eleme.io/#/zh-CN/component/input
   button按钮 传送门http://element-cn.eleme.io/#/zh-CN/component/button

Ⅲ.用户数据列表：
饿了吗组件 Table表格（固定列表格） 传送门http://element-cn.eleme.io/#/zh-CN/component/table
   Switch 开关传送门http://element-cn.eleme.io/#/zh-CN/component/switch

Ⅳ.底部的分页：
饿了吗组件 Pagination 分页（完整功能）传送门http://element-cn.eleme.io/#/zh-CN/component/pagination

效果图：

image

示例代码

2.完成user组件动态交互

Ⅰ.用户查询

NO.	题外话：组件中写name的好处
1	vue开发者界面语义更明确
2	可以使用搜索快速定位到组件

image

用户查询步骤：点搜索→发请求→调接口→拿数据

NO.	用户查询步骤
1	根据input输入的查询字段可以进行模糊搜索，如果input输入为空默认搜索到全部用户
2	搜索方法和页面刷新created调用的方法一样，可以封装复用

Ⅱ.用户添加
饿了吗：Dialog 对话框（自定义内容） 传送门http://element-cn.eleme.io/#/zh-CN/component/dialog

NO.	Dialog对话框
1	和面包屑同级，新增html用户添加的对话框代码
1	在form上添加:rules="rules"属性，增加表单数据验证
2	在form上添加：ref="userForm"属性，并将userForm传给提交按钮，增加表单提交验证
3	表单验证是前端验证可以被绕过，主要防止普通用户的误操作
4	技术用户可以绕过前端验证，比如用postman直接发送请求，添加用户，就不需要受到前端的限制
5	所以后端服务器一定会再验证一次

//template
 
    
      
      
      
      
        
          
        
        
          
          
        
        
          
        
        
          
        
      
      

        取 消
        
        确 定
      
    

//css


//js

Ⅲ.用户状态（启用跟禁用该用户）

饿了吗组件 Switch 开关有change方法

image

//template中
 
 

//js的methods中增加如下方法

Ⅳ.用户删除：传入id即可

//在删除按钮增加delOne方法，写在methods内

V.用户编辑：

NO.	用户编辑
1	进入编辑状态
2	保存编辑结果

进入编辑状态

//template


    
      
      
      
        
          
          
          
        
        
          
        
        
          
        
      
      

        取 消
        
        确 定
      
    


//js:

保存编辑结果

//1.template:增加确定保存按钮

     取 消
     
     确 定


//2.js：methods里增加方法

VI.分配角色

NO.	分配角色
1	弹出角色框，分配角色
2	保存分配结果

饿了吗组件 Select 选择器
传送门http://element-cn.eleme.io/#/zh-CN/component/select

//template

    
      
      
        
          {{selectUser.username}}
        
        
           
              
              
          
        
      
      

        取 消
        
        确 定
      
    

//js

V.分页功能实现
饿了吗组件 Pagination 分页的一些属性和方法

属性/方法	作用
1.@size-change="handleSizeChange"	pageSize (每页条数) 改变时会触发，回调参数是新的pageSize
2.@current-change="handleCurrentChange"	currentPage（当前页）改变时会触发，回调参数是新的currentPage
3.:page-sizes="[2, 4, 6, 8, 10]"	这是下拉框可以选择的，每选择一行，要展示多少内容
4.:page-size="pageSize"	显示当前行的条数
5.:total="userList.length"	总共有多少数据
6.:data="userList.slice((currentPage-1)pagesize,currentPagepagesize)	userList取第几页的数据，最为重要的一句话

//html

    
      
        
        
        
        
          
          
          
          
          
          
          
            
            
          
          
            
          
        
      
    

    
      
      
      
      
      
      
        
        
        
      
    


//js 在methods中加如下方法

本文同步发表在我的个人博客：https://www.lubaojun.com/