vue + Element-UI 实现完整版用户列表以及增删改功能

用户列表已经完全做好，其中包括用户列表查询，数据增删改，以及翻页功能。

<template><div><!-- 面包屑导航区域--><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item><el-breadcrumb-item>用户列表</el-breadcrumb-item></el-breadcrumb><!--卡片试图区域--><el-card><!--搜索与添加区域--><el-row :gutter="20"><el-col :span="15"><el-inputplaceholder="请输入内容"v-model="queryInfo.query"clearable@clear="getUserList"><el-buttonslot="append"icon="el-icon-search"@click="getUserList"></el-button></el-input></el-col><el-col :span="4"><el-button type="pri**ry" @click="addDialogVisible = true">添加用户</el-button></el-col></el-row><!--用户列表区域--><el-table :data="userList" border stripe><el-table-column type="index" label="#"></el-table-column><el-table-column label="姓名" prop="username"></el-table-column><el-table-column label="邮箱" prop="e**il"></el-table-column><el-table-column label="电话" prop="mobile"></el-table-column><el-table-column label="角色" prop="role_name"></el-table-column><el-table-column label="状态"><template slot-scope="scope"><el-switchv-model="scope.row.mg_state"@change="userStateChanged(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作" width="180px"><template slot-scope="scope"><!-- 修改按钮 --><el-buttontype="pri**ry"icon="el-icon-edit"size="mini"@click="showEditDialog(scope.row.id)"></el-button><!-- 删除按钮 --><el-buttontype="danger"icon="el-icon-delete"size="mini"@click="removeUserById(scope.row.id)"></el-button><el-tooltipeffect="dark"content="分配角色"placement="top-start":enterable="false"><el-buttontype="warning"icon="el-icon-setting"size="mini"></el-button></el-tooltip></template></el-table-column></el-table><!--分页区域--><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></el-card><!--添加用户的对话框--><el-dialogtitle="添加用户":visible.sync="addDialogVisible"width="50%"@close="addDialogClosed"><!--主体区域--><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="e**il"><el-input v-model="addForm.e**il"></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="pri**ry" @click="addUser">确 定</el-button></span></el-dialog><!--修改用户对话框--><el-dialogtitle="修改用户":visible.sync="editDialogVisible"width="50%"@close="editDialogClosed"><el-form:model="editForm":rules="editFormRules"ref="editFormRef"label-width="70px"><el-form-item label="用户名"><el-input v-model="editForm.username" disabled></el-input></el-form-item><el-form-item label="邮箱" prop="e**il"><el-input v-model="editForm.e**il"></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="pri**ry" @click="editUserInfo">确 定</el-button></span></el-dialog></div> 

</template><script> 
export default {data() {// 校验邮箱var checkE**il = (rule, value, cb) => {const regE**il = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/if (regE**il.test(value)) {// 合法邮箱return cb()}cb(new Error('请输入合法的邮箱'))}// 校验手机号var checkMobile = (rule, value, cb) => {const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/if (regMobile.test(value)) {return cb()}cb(new Error('请输入合法手机号'))}return {// 获取用户列表的参数对象queryInfo: {query: '',// 当前的页数pagenum: 1,// 当前每页显示的条数pagesize: 2},userList: [],total: 0,// 控制添加用户对话框显示与隐藏addDialogVisible: false,// 添加用户的表单数据addForm: {username: '',password: '',e**il: '',mobile: ''},// 添加表单验证规则对象addFormRules: {username: [{required: true,message: '请输入用户名',trigger: 'blur'},{min: 3,max: 10,message: '用户名的长度在3-10个字符之间',trigger: 'blur'}],password: [{required: true,message: '请输入密码',trigger: 'blur'},{min: 6,max: 15,message: '密码的长度在6-15个字符之间',trigger: 'blur'}],e**il: [{required: true,message: '请输入邮箱',trigger: 'blur'},{validator: checkEmail,trigger: 'blur'}],mobile: [{required: true,message: '请输入手机',trigger: 'blur'},{validator: checkMobile,trigger: 'blur'}]},// 修改用户对话框editDialogVisible: false,editForm: {},// 修改表单验证对象editFormRules: {e**il: [{required: true,message: '请输入邮箱',trigger: 'blur'},{validator: checkEmail,trigger: 'blur'}],mobile: [{required: true,message: '请输入手机',trigger: 'blur'},{validator: checkMobile,trigger: 'blur'}]}}},created() {this.getUserList()},methods: {async getUserList() {const { data: res } = await this.$http.get('users', {params: this.queryInfo})if (res.meta.status !== 200) return this.$message.error(res.meta.msg)console.log(res)this.userList = res.data.usersthis.total = res.data.total},// 监听 pagesize 改变的事件handleSizeChange(newSize) {this.queryInfo.pagesize = newSizethis.getUserList()console.log(newSize)},// 监听页码值改变的事件handleCurrentChange(newPage) {this.queryInfo.pagenum = newPagethis.getUserList()console.log(newPage)},// 修改用户状态async userStateChanged(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_statereturn this.$message.error(res.meta.msg)}this.$message.success(res.meta.msg)},// 监听添加用户对话框的关闭事件async addDialogClosed() {// 重置表单this.$refs.addFormRef.resetFields()},// 点击按钮，添加新用户addUser() {this.$refs.addFormRef.validate(async valid => {if (!valid) return// 可以发起添加用户的网络请求const { data: res } = await this.$http.post('users', this.addForm)if (res.meta.status !== 201) return this.$message.error(res.meta.msg)// 添加成功this.$message.success(res.meta.msg)// 隐藏弹出框this.addDialogVisible = false// 刷新用户列表this.getUserList()})},// 修改用户async showEditDialog(id) {const { data: res } = await this.$http.get('users/' + id)if (res.meta.status !== 200) {return this.$message.error(this.meta.msg)}this.editForm = res.datathis.editDialogVisible = true},// 监听修改用户对话框的关闭事件editDialogClosed() {this.$refs.editFormRef.resetFields()},// 修改用户信息并提交editUserInfo() {this.$refs.editFormRef.validate(async valid => {if (!valid) return// 发起修改用户信息的数据请求const { data: res } = await this.$http.put('users/' + this.editForm.id,{e**il: this.editForm.e**il,mobile: this.editForm.mobile})if (res.meta.status !== 200) {return this.$message.error(this.meta.msg)}// 关闭对话框this.editDialogVisible = false// 刷新数据列表this.getUserList()// 提示修改成功this.$message.success('更新成功')})},// 根据id删除对应的用户信息async removeUserById(id) {// 弹框提示用户是否删除const confirmResult = await this.$confirm('此操作将长久删除该用户, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).catch(err => err)// 如果用户确认删除，则返回字符串 confirm// 如果用户取消删除，则返回字符串 cancelif (confirmResult !== 'confirm') {return this.$message.info('已取消删除')}// 发送删除请求const { data: res } = await this.$http.delete('users/' + id)if (res.meta.status !== 200) {this.$message.error('删除失败')}this.$message.success('删除成功')this.getUserList()}} 
} 
</script><style lang="less" scoped></style>