Element-UI+Vue实现主页布局——侧边栏用户布局（下）

谁借莪１个温暖的怀抱￠ 2024-04-03 09:27 57阅读 0赞

之前的知识：

[Element-UI+Vue实现主页布局——侧边栏用户布局（上）\_我爱布朗熊的博客-CSDN博客][Element-UI_Vue_-CSDN]

**目录**

一、实现数据的分页效果

二、实现用户状态的修改

三、实现搜索功能

四、实现添加用户功能

4.1 点击按钮弹出添加用户的对话框

4.2在对话框中渲染一个添加用户的表单

4.3 实现自定义规则校验输入内容

4.4 实现添加表单的重置功能

4.5 添加用户前的预校验功能

4.6 发起请求添加一个新用户

五、用户修改的操作

5.1根据ID查询用户信息

5.2绘制修改用户的表单

5.3 修改表单关闭之后的重置操作

5.4 提交表单之前的预验证功能

5.5 提交修改用户请求

--------------------

## 一、实现数据的分页效果 ##

我们用这个功能比较全的分页组件

![183002af400a42f694c553b9dbe0a3c7.png][]

<el-pagination
                    @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5,10 ]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>

## ![13321be5ff05456b9be246c3ccf3aba3.png][] ##

##  ##

## 二、实现用户状态的修改 ##

在上一篇的内容中我们实现了状态添加开关，但是没有到数据库中进行保存，我们刷新之后又恢复到原来的内容了

![8f98b00b85e94ffab401b923cf5619d6.png][]

![41f38812d7964b45935360cbe7575fe0.png][]

我们再switch开关上面添加一个@change的函数，这个是Element-UI文档中的，我们只需要定义后面的函数参数就可以了，然后将scope.row参数传入到里面

<el-table-column  label="状态" prop="mg_state">
                        
                        <template slot-scope="scope" >
                           
                           <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
                          </el-switch>
    
                        </template>
                    </el-table-column>

// 监听switch开关状态的改变
           async userStateChanged(userinfo){
            //    console.log(userinfo)
              const {data:res} =  await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
            
               if(res.meta.status !==200){
                // 因为我们更新失败了 如果本来是关着的，你点了一下然后失败了 此时按钮应该还是关着的，但是因为你刚刚点击打开了
                // 这显然不符合实际，所以我们再取反，相当于恢复原来的位置
                userinfo.mg_state =!userinfo.mg_state
                return this.$message.error('更新用户状态失败')
               }
               this.$message.success('更新用户状态成功！')
            }

![fa12cfdaef0d4062be82cd00361d85a3.png][]

## 三、实现搜索功能 ##

getUserList函数再我们初始化页面的时候就已经写完了

这个地方后端应该是做了一个模糊查询，根据某一点的内容来搜索内容，我们双向绑定的是queryInfo.query属性，然后当我们点击搜索按钮的时调用getUserList回调函数发起请求，最终我们得到数据返回到页面上

我们下input文本框上还有一个clearable属性，这个的目的就是让文本框的最右侧有一个x，我们点一下之后，整个文本框就会清空

@clear="getUserList" @clear的作用就是在发生清空文本框的时候，会执行一个getUserList函数来渲染用户列表

<el-col :span="10">
                        
                       <el-input clearable @clear="getUserList" v-model="queryInfo.query" placeholder="请输入内容">
                        
                         <el-button @click="getUserList" slot="append" icon="el-icon-search"></el-button>
                       </el-input>
                    </el-col>

async getUserList(){
            // 使用axios发起get请求
             const {data:res}  =  await this.$http.get('users',{params:this.queryInfo})
             if(res.meta.status !==200) 
               return this.$message.error('获取用户列表失败！')
    
             this.userList = res.data.users
             this.total = res.data.total
            },

最终效果图：当我们点击文本框最右侧的x时，我们的页面的内容会展示全部的内容

![d631508573634957b9ae329030ebadad.png][]

## 四、实现添加用户功能 ##

## 4.1 点击按钮弹出添加用户的对话框 ##

依然使用Element-UI中的组件

![ccf92d228d8743dc94a491b870986b22.png][]

我们在添加用户按钮上定义一个鼠标单击事件，当点击按钮之后，让我们自定义的属性 addDialogVisible为true，代表显示对话框

<el-button @click="addDialogVisible=true" type="primary">添加用户</el-button>

下面就是对话框的代码

<el-dialog
                    title="提示"
                    :visible.sync="addDialogVisible"
                    width="50%">
                    
                    <span>这是一段信息</span>
    
                    
                    <span slot="footer" class="dialog-footer">
                        
                        <el-button @click="addDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>

效果图：这个对话框我们点击右上角的×可以关闭，取消也可以关闭，单击出对话框以外的内容也可以关闭

![8142a0f0d9474740910ee9eab503623e.png][]

### 4.2在对话框中渲染一个添加用户的表单 ###

我们也可以复习一下我们之前写过的表单验证：

[Element-UI+vue实现登录表单\_我爱布朗熊的博客-CSDN博客][Element-UI_vue_-CSDN]

<el-dialog
                    title="提示"
                    :visible.sync="addDialogVisible"
                    width="50%">
                    
                    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                       
                        <el-form-item label="用户名" prop="username">
                             <el-input v-model="addForm.username"></el-input>
                         </el-form-item>
                         <el-form-item label="密码" prop="password">
                             <el-input v-model="addForm.password"></el-input>
                         </el-form-item>
                         <el-form-item label="邮箱" prop="email">
                             <el-input v-model="addForm.email"></el-input>
                         </el-form-item>
                         <el-form-item label="手机" prop="mobile">
                             <el-input v-model="addForm.mobile"></el-input>
                         </el-form-item>
                    </el-form>
    
                    
                    <span slot="footer" class="dialog-footer">
                        
                        <el-button @click="addDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>

//  添加用户的表单数据
            addForm:{
                username:'',
                password:'',
                email:'',
                mobile:''
    
            },
            // 添加表单的验证规则对象
            addFormRules:{
                username:[
                    // trigger:'blur'失去焦点后开始验证
                    {required:true,message:'请输入用户名',trigger:'blur'},
                    {min:3,max:10,message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                password:[
                    // trigger:'blur'失去焦点后开始验证
                    {required:true,message:'请输入密码',trigger:'blur'},
                    {min:6,max:15,message: '长度在 6 到 15 个字符', trigger: 'blur'}
                ],
                email:[
                    // trigger:'blur'失去焦点后开始验证
                    {required:true,message:'请输入邮箱',trigger:'blur'},
                ],
                mobile:[
                    // trigger:'blur'失去焦点后开始验证
                    {required:true,message:'请输入手机号',trigger:'blur'},
                ],
            }

![b71d4e73b1194d3097681e050c190dfd.png][]

### **4.3 实现自定义规则校验输入内容** ###

data(){
            // 验证邮箱的规则   cb是一个回调函数
            var checkEmail =(rule,value,cb)=>{
                // 验证邮箱的正则
                const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
    
                if(regEmail.test(value)){
                    // 合法的邮箱
                    return cb()
                }
                cb(new Error('请输入合法的邮箱'))
            }
    
            // 验证手机号的规则
            var checkMobile=(rule,value,cb)=>{
                // 电话号码的正则表达式
                const regMobile=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                if(regMobile.test(value)){
                    return cb()
                }
                cb(new Error('请输入合法的手机号码'))
            }
    
    }

email:[
                    // trigger:'blur'失去焦点后开始验证
                    {required:true,message:'请输入邮箱',trigger:'blur'},
                    // 自定义验证
                    {validator:checkEmail,trigger:'blur'}
                ],
                mobile:[
                    // trigger:'blur'失去焦点后开始验证
                    {required:true,message:'请输入手机号',trigger:'blur'},
                    // 自定义验证
                    {validator:checkMobile,trigger:'blur'}
                ],
            }

当然我们除了这一种方法，我们也开可以直接在规则找那个添加一个正则表达式，这两种方式都是可以的，想用哪种用哪种，下面这种比较方便

email:[
                    // trigger:'blur'失去焦点后开始验证
                    {required:true,message:'请输入邮箱',trigger:'blur'},
                    // 自定义验证
                    // {validator:checkEmail,trigger:'blur'}
                    {pattern:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,message:'请输入正确的邮箱',trigger:'blur'}
                ],

效果图：

![9f8d2eba867d46c19f90711fdaee88c0.png][]

### 4.4 实现添加表单的重置功能 ###

我们什么时候对表单进行重置操作？

当我们关闭表单（在这里其实是对话框）之后进行重置操作

注意这个地方是@close，在对话框关闭之后执行

<el-dialog
                    @close="addDialogClosed"
                    title="提示"
                    :visible.sync="addDialogVisible"
                    width="50%" >

表单的ref属性值是addFormRef

<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">

编写@close回调函数

// 监听添加用户对话框的关闭事件
            addDialogClosed(){
                // 获取表单
               this.$refs.addFormRef.resetFields()
            }

### 4.5 添加用户前的预校验功能 ###

那我们什么时候进行校验功能呢？

在我们点击确认按钮的时候，绑定一个单击事件，然后对我们填写的内容进行预验证，如果验证不通过的话会依然停留在对话框阶段

<el-button type="primary" @click="addUser">确 定</el-button>

// 添加用户操作
            addUser(){
                // 获取表单
                this.$refs.addFormRef.validate(valid=>{
                    console.log(valid)
                    if(!valid){
                        // 校验没有通过
                        return
                    }
                    // 校验通过了可以发送AJAX请求
    
                })
            },

效果：此时输出的结果是false

![e4333ddd8dcc43728743112c57306e36.png][]

### 4.6 发起请求添加一个新用户 ###

![2491364ac7e3458cb8b33dbd5fae1490.png][]

![1214b583f3cc4812973f129447e1a490.png][]

// 添加用户操作
            addUser(){
                // 获取表单
                this.$refs.addFormRef.validate(async valid=>{
                    console.log(valid)
                    if(!valid){
                        // 校验没有通过
                        return
                    }
                    // 校验通过了可以发送AJAX请求
                    const {data:res}= await this.$http.post('users',this.addForm)
                    if(res.meta.status !==201){
                        this.$message.error('添加用户失败！')
                    }
                    this.$message.success('添加用户成功！')
    
                    // 添加成功后隐藏对话框
                    this.addDialogVisible=false
                    this.getUserList()
                })
            },

![424f1fbdda564a3bb97f9085ee475424.png][]

![85fceac3372543f2b1292f1fa1a3d035.png][]

## 五、添加用户修改的操作 ##

我们使用这个基本用法的对话框

![e543b3d18b9d4537bb4286b7a78ea22e.png][]

<el-button @click="showEditDialog()"  size="mini" type="primary" icon="el-icon-edit">  </el-button>

<el-dialog
                    title="修改用户"
                    :visible.sync="editDialogVisible"
                    width="50%">
                    <span>这是一段信息</span>
    
                    
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editDialogVisible= false">取 消</el-button>
                        <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
                    </span>
                 </el-dialog>

// 展示编辑用户的对话框
            showEditDialog(){
              this.editDialogVisible = true
            }

![92b3a013ee5348c5812f906115826a0a.png][]

### 5.1根据ID查询用户信息 ###

![63104cdeb11645e59f4b95b7a6dc2cff.png][]

将函数改为下面的形式，并且带data中添加一个editForm属性

<el-button @click="showEditDialog(scope.row.id)"  size="mini" type="primary" icon="el-icon-edit">  </el-button>

// 查询到的用户信息对象
            editForm:{},

// 展示编辑用户的对话框
            async showEditDialog(id){
                // 打开编辑用户的对话框
              this.editDialogVisible = true
    
              const{data:res} = await this.$http.get('users/'+id)
              if(res.meta.status !==200)
                return this.$message.error('查询用户信息失败')
              this.editForm = res.data
    
            }

通过上面的样子我们就可以获取到用户信息了

### 5.2绘制修改用户的表单 ###

<el-dialog
                    title="修改用户"
                    :visible.sync="editDialogVisible"
                    width="50%">
    
                    <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                      
                        <el-form-item label="用户名">
                            
                          <el-input disabled v-model="editForm.username"></el-input>
                       </el-form-item>
    
                       <el-form-item label="邮箱" prop="email">
                          <el-input  v-model="editForm.email"></el-input>
                       </el-form-item>
    
                       <el-form-item label="电话" prop="mobile">
                          <el-input  v-model="editForm.mobile"></el-input>
                       </el-form-item>
    
    
    
                    </el-form>
    
                    
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editDialogVisible= false">取 消</el-button>
                        <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
                    </span>
    
                 </el-dialog>

editFormRules:{
                email:[
                    // trigger:'blur'失去焦点后开始验证
                    {required:true,message:'请输入邮箱',trigger:'blur'},
                    // 自定义验证
                    {validator:checkEmail,trigger:'blur'}
                ],
                mobile:[
                    // trigger:'blur'失去焦点后开始验证
                    {required:true,message:'请输入手机号',trigger:'blur'},
                    // 自定义验证
                    {validator:checkMobile,trigger:'blur'}
                ],
            }

![222e39b8deb2428cae31edaf8d691266.png][]

### 5.3 修改表单关闭之后的重置操作 ###

添加@close事件，在表单关闭之后执行回调函数,当我们在编写者一半关闭后再打开，页面展示的就是还是数据库中的内容

<el-dialog
                     @close="editDialogClosed"
                    title="修改用户"
                    :visible.sync="editDialogVisible"
                    width="50%">

// 修改用户对话框关闭之后重置表单内容
            editDialogClosed(){
                this.$refs.editFormRef.resetFields()
            }

### 5.4 提交表单之前的预验证功能 ###

我们在确定按钮上面进行绑定

<el-button  type="primary" @click="editUserInfo">确 定</el-button>

// 提交修改用户的预验证功能
            editUserInfo(){
                this.$refs.editFormRef.validate(valid=>{
                    console.log(valid)
                })
            }

![20b324fc04104f5b92e4a5e77e51a5c4.png][]

### 5.5 提交修改用户请求 ###

![8195b69eec6940b086159e8e9ca753e7.png][]

// 提交修改用户的预验证功能
            editUserInfo(){
                this.$refs.editFormRef.validate( async valid=>{
                    // console.log(valid)
                    if(!valid)
                       return
                     const {data:res} =  await this.$http.put('users/'+this.editForm.id,{
                        email:this.editForm.email,
                        mobile:this.editForm.mobile
                    })
                    
                    if(res.meta.status !==200){
                        return this.$message.error('更新用户信息失败')
                    }
    
                    // 关闭对话框
                    this.editDialogVisible = false
                    // 更新列表
                    this.getUserList()
                    // 提示修改成功
                    this.$message.success('更新用户信息失败')
                })
            }

![8b1bc29096ae4614bd32ed8f5531be26.png][]

![aac59d376ebf4c39819504a946b5d502.png][]

[Element-UI_Vue_-CSDN]: https://blog.csdn.net/weixin_51351637/article/details/127166121
[183002af400a42f694c553b9dbe0a3c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e3fec43e575b46aea99938079aee0a00.png
[13321be5ff05456b9be246c3ccf3aba3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2a871f28541441a1964d801554cd1197.png
[8f98b00b85e94ffab401b923cf5619d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f59e10a21a4c46e98defd405d8bdf59a.png
[41f38812d7964b45935360cbe7575fe0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ae2edd90559348569b240ae2cf50b5ae.png
[fa12cfdaef0d4062be82cd00361d85a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7cda07aa5873435dbbd5e4801497c623.png
[d631508573634957b9ae329030ebadad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a58b7830a48348599b2bbd7a43b1849c.png
[ccf92d228d8743dc94a491b870986b22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c03522aab6d8470bafcabc60b55ded74.png
[8142a0f0d9474740910ee9eab503623e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2f1a5e8a08ad4f279d9c1344521de7c9.png
[Element-UI_vue_-CSDN]: https://blog.csdn.net/weixin_51351637/article/details/127124540
[b71d4e73b1194d3097681e050c190dfd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/cf6352702c2e484b89ce6ca9151c6b4e.png
[9f8d2eba867d46c19f90711fdaee88c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7e2799c3f79d4039a6980d81d0ea5f8d.png
[e4333ddd8dcc43728743112c57306e36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f39d28170de94bc58125853aaa9ee537.png
[2491364ac7e3458cb8b33dbd5fae1490.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e92523c8ab8d4a53b98d1b9bab7a6b9a.png
[1214b583f3cc4812973f129447e1a490.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/57362f0739cb4c908bfd942ff9196221.png
[424f1fbdda564a3bb97f9085ee475424.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b73f6e69254748e4bb2419d4ff209883.png
[85fceac3372543f2b1292f1fa1a3d035.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ff1d077032bb4b3aa3d5309770c76272.png
[e543b3d18b9d4537bb4286b7a78ea22e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/750e2087742f4f72ab344dd5578194a9.png
[92b3a013ee5348c5812f906115826a0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b04197719d3d4065be948c305a810b05.png
[63104cdeb11645e59f4b95b7a6dc2cff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/4ea28b1c0a9d48b98567e4dd16328a48.png
[222e39b8deb2428cae31edaf8d691266.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/705fce21ce3644c1930925c5aa315478.png
[20b324fc04104f5b92e4a5e77e51a5c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/546944a22c0544e1af771be05494d7f3.png
[8195b69eec6940b086159e8e9ca753e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3c21d0ca39074bdc82035c0090af630e.png
[8b1bc29096ae4614bd32ed8f5531be26.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/be25ffdb2d3044208ede1f1e7f679d9b.png
[aac59d376ebf4c39819504a946b5d502.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/213fd5f4ee0444ed8d491f60b4bd08db.png