功能：
列表渲染分页修改用户的状态添加用户编辑删除分配权限搜索详细功能介绍：
table表格渲染 queryInfo 指的是 这个对象内的参数，去获取数据哦 里面有着 表单查询的参数，当前页，显示多少页先获取用户列表，然后数据渲染prop是对应的字段名 label对应的头部标题需要当前行数据的时候，需要在当前 template 包裹 然后使用 scope插槽的方式 里面之中 组件拿到当前行的数据 scope.row.XXX 分页实现 size-change 事件来处理页码大小 就是修改了 当前页设置为1 和 显示的数据 设置为新选择的值 然后调用获取最新的用户列表current-change 当前页变动时候触发的事件 当前页设置为新选择的值 然后调用获取最新的用户列表 修改用户的状态 当状态发生改变的时候 拿到当前用户 的所有信息，向后台发起请求，id 还有状态 即可！添加用户： 点击按钮 弹出对话框 (dialog) 需要在data数据之中定义一个变量 dialogVisible 这个是弹出窗的显示或者隐藏的状态注意点：就是这个表单 在关闭的时候，需要监听那个事件调用的，然后把表单重置一下 // 监听 添加用户对话框的关闭事件 addDialogClosed () { // 拿到当前 添加用户的 弹出对话框的节点 重置表单后 this.$refs.addUserFormRef.resetFields() }, 添加用户的一个对象 addUserForm 存放着添加用户的数据等 与对话框的数据绑定还有绑定校验规则添加用户后，点击确定 addUser 先校验规则后 如果校验不过 直接return否则的话就发起请求·向后台写入数据然后显示提示信息 还有 调用获取 最新的用户列表 隐藏对话框隐藏！ 编辑用户 点击编辑用户的时候 ，先 控制 editDialogVisible 编辑对话框 为显示状态从点击的时候，传递当前编辑id，发起请求，拿到当前要编辑的信息针对编辑对话框的 事件处理 editUserForm 编辑的对象 这是从 根据id请求来的数据对象对于数据渲染到对话框之中editUser 点击确定的时候 表单需要验证通过然后把编辑对象数据 发送修改请求，修改数据然后隐藏对话框 还有 调用 获取最新的用户列表等！ 需要监听 编辑 对话框的 关闭，然后对表单进行重置 删除用户 点击删除的时候 传递当前删除的id添加一个一个信息 (MessageBox 弹框)根据这个删除的id 发起请求，删除后台数据然后在使用 filter 过滤掉删除的id 这样的话就 (或者 直接调用 获取最新的列表数据) 分配权限 点击分配权限的时候 传递当前行的数据控制 分配权限的对话框 setRoleDialogVisible 设置为显示userInfo 当前需要被分配角色的用户 这是从 传递行的数据 赋值的rolesLsit 权限列表 需要发起请求获取权限列表Select 选择器 组件的使用点击对话框中的分配权限 确定按钮 saveRoleInfo 若是非当前角色id 直接给提示 请选择要分配的角色拿到当前 userInfo 需要分配角色的id 还有所选中的id(this.selectRoleId)然后调用 最新用户的列表 关闭分配权限 把需要分配的角色 清空把当前选中的 权限id 清空 搜索 就是获取 最新的 用户列表之中 调用即可 因为里面已经有着 相对于的请求，还有参数！ <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="6"> <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList"> <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button> </el-input> </el-col> <el-col :span="4"> <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button> </el-col> </el-row> <!-- 用户列表区域 --> <el-table :data="userlist" border stripe> <!-- stripe: 斑马条纹 border：边框--> <el-table-column type="index" label="#"></el-table-column> <el-table-column prop="username" label="姓名"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> <el-table-column prop="mobile" label="电话"></el-table-column> <el-table-column prop="role_name" label="角色"></el-table-column> <el-table-column label="状态"> <template slot-scope="scope"> <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="showEditDialog(scope.row.id)" ></el-button> <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="removeUserById(scope.row.id)" ></el-button> <el-tooltip class="item" effect="dark" content="角色分配" :enterable="false" placement="top" > <el-button type="warning" icon="el-icon-setting" size="mini" circle @click="showSetRole(scope.row)" ></el-button> </el-tooltip> </template> </el-table-column> </el-table> <!-- 分页区域 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[2, 5, 10, 15]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totle" ></el-pagination> </el-card> <!-- 添加用户的对话框 --> <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"> <!-- 内容主体 --> <el-form :model="addUserForm" ref="addUserFormRef" :rules="addUserFormRules" label-width="100px" > <el-form-item label="用户名" prop="username"> <el-input v-model="addUserForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="addUserForm.password"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="addUserForm.email"></el-input> </el-form-item> <el-form-item label="手机" prop="mobile"> <el-input v-model="addUserForm.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="addUser">确 定</el-button> </span> </el-dialog> <!-- 修改用户的对话框 --> <el-dialog title="修改用户信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed" > <!-- 内容主体 --> <el-form :model="editUserForm" ref="editUserFormRef" :rules="editUserFormRules" label-width="70px" > <el-form-item label="用户名"> <el-input v-model="editUserForm.username" disabled></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="editUserForm.email"></el-input> </el-form-item> <el-form-item label="手机" prop="mobile"> <el-input v-model="editUserForm.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="editUser">确 定</el-button> </span> </el-dialog> <!-- 分配角色对话框 --> <el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed"> <div> <p>当前用户：{{userInfo.username}}</p> <p>当前角色：{{userInfo.role_name}}</p> <p> 分配角色： <el-select v-model="selectRoleId" filterable allow-create default-first-option placeholder="请选择文章标签" > <el-option v-for="item in rolesLsit" :key="item.id" :label="item.roleName" :value="item.id" ></el-option> </el-select> </p> </div> <span slot="footer" class="dialog-footer"> <el-button @click="setRoleDialogVisible = false">取 消</el-button> <el-button type="primary" @click="saveRoleInfo">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data () { // 自定义邮箱规则 var checkEmail = (rule, value, callback) => { const regEmail = /^\w+@\w+(\.\w+)+$/ if (regEmail.test(value)) { // 合法邮箱 return callback() } callback(new Error('请输入合法邮箱')) } // 自定义手机号规则 var checkMobile = (rule, value, callback) => { const regMobile = /^1[34578]\d{9}$/ if (regMobile.test(value)) { return callback() } // 返回一个错误提示 callback(new Error('请输入合法的手机号码')) } return { // 获取用户列表查询参数对象 queryInfo: { query: '', // 当前页数 pagenum: 1, // 每页显示多少数据 pagesize: 5 }, userlist: [], totle: 0, // 添加用户对话框 addDialogVisible: false, // 用户添加 addUserForm: { username: '', password: '', email: '', mobile: '' }, // 用户添加表单验证规则 addUserFormRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 2, max: 10, message: '用户名的长度在2～10个字', trigger: 'blur' } ], password: [ { required: true, message: '请输入用户密码', trigger: 'blur' }, { min: 6, max: 18, message: '用户密码的长度在6～18个字', trigger: 'blur' } ], email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' } ], mobile: [ { required: true, message: '请输入手机号码', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' } ] }, // 修改用户 editDialogVisible: false, editUserForm: {}, // 编辑用户表单验证 editUserFormRules: { email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' } ], mobile: [ { required: true, message: '请输入手机号码', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' } ] }, // 分配角色对话框 setRoleDialogVisible: false, // 当前需要被分配角色的用户 userInfo: {}, // 所有角色数据列表 rolesLsit: [], // 已选中的角色Id值 selectRoleId: '' } }, 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('获取用户列表失败！') } this.userlist = res.data.users this.totle = res.data.totle }, // 监听 pagesize改变的事件 handleSizeChange (newSize) { this.queryInfo.pagesize = newSize this.queryInfo.pagenum = 1; this.getUserList() }, // 监听 页码值 改变事件 handleCurrentChange (newSize) { this.queryInfo.pagenum = newSize this.getUserList() }, // 监听 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('更新用户状态成功！') }, // 监听 添加用户对话框的关闭事件 addDialogClosed () { this.$refs.addUserFormRef.resetFields() }, // 添加用户 addUser () { // 提交请求前，表单预验证 this.$refs.addUserFormRef.validate(async valid => { // console.log(valid) // 表单预校验失败 if (!valid) return const { data: res } = await this.$http.post('users', this.addUserForm) if (res.meta.status !== 201) { this.$message.error('添加用户失败！') } this.$message.success('添加用户成功！') // 隐藏添加用户对话框 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.editUserForm = res.data this.editDialogVisible = true }, // 监听修改用户对话框的关闭事件 editDialogClosed () { this.$refs.editUserFormRef.resetFields() }, // 修改用户信息 editUser () { // 提交请求前，表单预验证 this.$refs.editUserFormRef.validate(async valid => { // console.log(valid) // 表单预校验失败 if (!valid) return const { data: res } = await this.$http.put( 'users/' + this.editUserForm.id, { email: this.editUserForm.email, mobile: this.editUserForm.mobile } ) if (res.meta.status !== 200) { this.$message.error('更新用户信息失败！') } // 隐藏添加用户对话框 this.editDialogVisible = false this.$message.success('更新用户信息成功！') this.getUserList() }) }, // 删除用户 async removeUserById (id) { const confirmResult = await this.$confirm( '此操作将永久删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).catch(err => err) // 点击确定 返回值为：confirm // 点击取消 返回值为： cancel if (confirmResult !== 'confirm') { return this.$message.info('已取消删除') } const { data: res } = await this.$http.delete('users/' + id) if (res.meta.status !== 200) return this.$message.error('删除用户失败！') this.$message.success('删除用户成功！') this.getUserList() }, // 展示分配角色的对话框 async showSetRole (role) { this.userInfo = role // 展示对话框之前，获取所有角色列表 const { data: res } = await this.$http.get('roles') if (res.meta.status !== 200) { return this.$message.error('获取角色列表失败！') } this.rolesLsit = res.data this.setRoleDialogVisible = true }, // 分配角色 async saveRoleInfo () { if (!this.selectRoleId) { return this.$message.error('请选择要分配的角色') } const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectRoleId }) if (res.meta.status !== 200) { return this.$message.error('更新用户角色失败！') } this.$message.success('更新角色成功！') this.getUserList() this.setRoleDialogVisible = false }, // 分配角色对话框关闭事件 setRoleDialogClosed () { this.selectRoleId = '' this.userInfo = {} } } } </script> <style lang="less" scoped> </style>