之前的知识：
Element-UI+Vue实现主页布局——侧边栏用户布局（上）_我爱布朗熊的博客-CSDN博客
目录
一、实现数据的分页效果
我们用这个功能比较全的分页组件
<!-- 分页区域 -->
<!-- @size-change="handleSizeChange" -->
<!-- @current-change="handleCurrentChange" 在当前页改变的时候，触发handleCurrentChange -->
<!-- :page-sizes="[1, 2, 5,10 ]" 每页可以显示1 2 5 10 具体多少可以根据我们自己选 -->
<!-- :page-size是一个数组 -->
<!-- :page-size="queryInfo.page-size" 当前每页显示多少条数据 -->
<!-- layout="total, sizes, prev, pager, next, jumper" layout指定页面上展示什么功能组件
total展示一共多少条 sizes展示每页显示多少条的一个下拉菜单 -->
<!-- :total="total"> 绑定我们有多少条数据 -->
<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><script>
export default {
name:"Users",
data(){
return{
queryInfo:{
query:'',
// 当前的页数
pagenum:1,
// 每页显示多少条数据 默认每页显示两条
pagesize:2,
},
userList:[],
// 总数据条数
total:0
}
},
created(){
// 每当组件创建成功时就初始化用户界面
this.getUserList()
},
methods:{
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
},
// 监听pagesize改变的事件
handleSizeChange(newSize){
// 这个pagesize就是空值每页显示多少条的
this.queryInfo.pagesize = newSize
// 当我们重新设置了每页显示多少条之后，我们可以重新发起一个请求获取数据来渲染页面
this.getUserList()
},
// 监听页码值改变的事件
handleCurrentChange(newPage){
// 这个地方也是同理
this.queryInfo.pagenum = newPage
this.getUserList()
}
}
}
</script>
二、实现用户状态的修改
在上一篇的内容中我们实现了状态添加开关，但是没有到数据库中进行保存，我们刷新之后又恢复到原来的内容了
我们再switch开关上面添加一个@change的函数，这个是Element-UI文档中的，我们只需要定义后面的函数参数就可以了，然后将scope.row参数传入到里面
<el-table-column label="状态" prop="mg_state">
<!--@change 是文档中规定的switch状态发生变化时的回调函数 -->
<template slot-scope="scope" >
<!-- {{scope.row}} 这个是这一行的数据 包括姓名、邮箱、状态等等 -->
<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('更新用户状态成功！')
}
三、实现搜索功能
getUserList函数再我们初始化页面的时候就已经写完了
这个地方后端应该是做了一个模糊查询，根据某一点的内容来搜索内容，我们双向绑定的是queryInfo.query属性，然后当我们点击搜索按钮的时调用getUserList回调函数发起请求，最终我们得到数据返回到页面上
我们下input文本框上还有一个clearable属性，这个的目的就是让文本框的最右侧有一个x，我们点一下之后，整个文本框就会清空
@clear="getUserList" @clear的作用就是在发生清空文本框的时候，会执行一个getUserList函数来渲染用户列表
<!-- 第一列 :span="7"指定宽度 一共24一行 -->
<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时，我们的页面的内容会展示全部的内容
四、实现添加用户功能
4.1 点击按钮弹出添加用户的对话框
依然使用Element-UI中的组件
我们在添加用户按钮上定义一个鼠标单击事件，当点击按钮之后，让我们自定义的属性 addDialogVisible为true，代表显示对话框
<el-button @click="addDialogVisible=true" type="primary">添加用户</el-button>下面就是对话框的代码
<!-- 添加用户的对话框 -->
<!-- title 是对话框最上面的标题 :visible.sync控制对话框的显示和隐藏-->
<!-- width设置对话框的宽度 :before-close 这是一个事件，在对话框关闭之前一般会触发一个函数 -->
<el-dialog
title="提示"
:visible.sync="addDialogVisible"
width="50%">
<!-- 内容主体区 -->
<span>这是一段信息</span>
<!-- 底部的按钮区 -->
<span slot="footer" class="dialog-footer">
<!-- @click="addDialogVisible = false" 当我们点击之后，将对话框隐藏 -->
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
效果图：这个对话框我们点击右上角的×可以关闭，取消也可以关闭，单击出对话框以外的内容也可以关闭
4.2在对话框中渲染一个添加用户的表单
我们也可以复习一下我们之前写过的表单验证：
Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客
<!-- 添加用户的对话框 -->
<!-- title 是对话框最上面的标题 :visible.sync控制对话框的显示和隐藏-->
<!-- width设置对话框的宽度 :before-close 这是一个事件，在对话框关闭之前一般会触发一个函数 -->
<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">
<!-- @click="addDialogVisible = false" 当我们点击之后，将对话框隐藏 -->
<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'},
],
}
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'}
],效果图：
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
4.6 发起请求添加一个新用户
// 添加用户操作
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()
})
},
五、添加用户修改的操作
我们使用这个基本用法的对话框
<!-- 修改按钮 -->
<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
}
5.1根据ID查询用户信息
将函数改为下面的形式，并且带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="用户名">
<!-- disabled 代表禁用，不能改 -->
<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'}
],
}
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)
})
}
5.5 提交修改用户请求
// 提交修改用户的预验证功能
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('更新用户信息失败')
})
}
1397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
