用户列表
1 通过路由的形式展示用户列表组件
- 首先在components文件夹下新建user文件夹 新建User组件
<template>
<div>
<h3>用户列表组件</h3>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
- 在路由文件中导入新建的User组件
在home路由规则中添加子路由
{ path: '/home', component: Home,
redirect: '/welcome',
children: [
{ path: '/welcome', component: Welcome },
{ path: '/users', component: Users }
] }
效果：
- 设置当前二级菜单路由链接在此页面常亮(刷新亦然)
| 参数 | 说明 |
|---|---|
| default-active | 当前激活菜单的 index |
在数据data中声明该属性的值 将该属性绑定至菜单组件el-menu
// 激活状态
activePath: ''
为二级菜单添加点击事件
将每次的index存入sessionStroge中
// 保存链接的激活状态
saveNavState(activePath) {
window.sessionStorage.setItem('activePath', activePath);
// 当点击路由链接时为绑定的属性值重新赋值
this.activePath = activePath;
}
由于该属性需要在页面加载时赋值 因此需要在生命周期钩子函数created中为该属性复制
// 在页面加载的时候取出路由
this.activePath = window.sessionStorage.getItem('activePath');
2 绘制用户列表UI
- 按照前面的写法在element-ui官网挑选合适的组件：面包屑导航、卡片视图、搜索框、栅格系统与按钮
- 同样按照前面的写法在element.js中按需导入并注册
<!-- 面包屑导航-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</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="7">
<el-input placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">
添加用户
</el-button>
</el-col>
</el-row>
</el-card>
</div>
3 获取用户列表信息
- 在methods中调用api获取用户数据 用户数据包括 用户信息和总数据条数
// 获取用户列表数据
async getUserList() {
const {data: res} = await this.$http.get('users', {params: this.queryInfo});
if(res.meta.status !== 200) return this.$message.error('获取用户数据列表失败!');
this.$message.success('获取用户数据列表成功!');
this.userlist = res.data.users;
this.total = res.data.total;
}
获取到的数据将被保存在data中事先声明的userlist和total中
// 用户数据声明
userlist: [],
// 数据条数
total: 0
- 由于数据需要在打开页面时获取 所以需要在生命周期钩子函数中调用获取用户信息的方法
created() {
this.getUserList();
}
4 渲染用户列表
- 使用el-table渲染用户列表
绑定data中通过getUserList()方法获取到的用户信息
<!-- 用户列表区域-->
<el-table :data="userlist" border stripe>
<!--为表单添加索引列-->
<el-table-column label="#" type="index"></el-table-column>
<el-table-column label="姓名" prop="username"></el-table-column>
<el-table-column label="邮箱" prop="email"></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="状态" prop="mg_state">
<template slot-scope="scope">
<el-switch
@change="userStateChanged(scope.row)"
v-model="scope.row.mg_state">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<!-- 修改-->
<el-tooltip :enterable="false" effect="dark" content="修改角色" placement="top-end">
<el-button @click="showEditDialog(scope.row.id)" size="mini" type="primary" icon="el-icon-edit"></el-button>
</el-tooltip>
<!-- 删除-->
<el-tooltip :enterable="false" effect="dark" content="删除角色" placement="top">
<el-button @click="removeUserById(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
</el-tooltip>
<!-- 分配角色-->
<el-tooltip :enterable="false" effect="dark" content="分配角色" placement="top-start">
<el-button size="mini" type="warning" icon="el-icon-setting"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
其中 使用了el-awitch表现角色的状态
2. 修改角色状态
为状态列的el-table-column添加作用域插槽 为el-switch绑定单击事件且为作用域插槽的scope.row.mg_state作双向数据绑定
// 监听用户状态的改变
async userStateChanged(userinfo) {
const {data: res} = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`);
// console.log(res);
if (res.meta.status !== 200) {
// 如果修改失败 将已经修改的状态值取反 否则将与实际情况偏离
userinfo.mg_state = !userinfo.mg_state;
return this.$message.error('用户状态修改失败!');
}
this.$message.success('用户状态修改成功!');
}
3. 分页器
使用el-pagination作分页器 事先在data中声明信息的当前页数 总页数
// 获取用户列表的参数对象
queryInfo: {
query: '',
// 当前页数
pagenum: 1,
// 当前每页显示数据条数
pagesize: 2
}
为分页器分别绑定页码改变和当前数据显示条数的改变的事件处理函数
<!-- 分页器-->
<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>
事件处理函数
// 监听pagesize改变的事件
handleSizeChange(newSize) {
// 将获取到的最新的pagesize保存到data中
this.queryInfo.pagesize = newSize;
// 当前每页显示条数改变时应该重新发起用户数据请求
this.getUserList();
},
// 监听页码值改变的事件
handleCurrentChange(newPage) {
// 将获取到的最新的页码保存到data中
this.queryInfo.pagenum = newPage;
// 当前页码值发生改变时应该重新发起用户数据请求
this.getUserList();
}
5 实现搜索功能
将搜索框中的数据双向数据绑定至data中的数据查询参数对象中的query中 并为搜索按钮绑定getUserList方法即可
但当清空搜索框中的数据时，需要重新获取所有的用户信息
此时 需要为输入框添加clearable属性便于一键清空 为其绑定清除事件getUserList即可
<el-input clearable @clear="getUserList" v-model="queryInfo.query" placeholder="请输入内容">
<el-button @click="getUserList" slot="append" icon="el-icon-search"></el-button>
</el-input>
6 添加用户
- 添加用户对话框
对话框用el-dialog实现 还是熟悉的按需导入和挂载
<!-- 添加用户对话框-->
<el-dialog
@close="addDialogClosed"
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 type="password" 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="addUser">确 定</el-button>
</span>
</el-dialog>
绑定:visible.sync="addDialogVisible"属性用来控制该对话框的打开与否
el-form来实现对话框主体区域的渲染
:model=“addForm”：绑定的addForm来实现数据的双向绑定
// 添加用户的数据对象
addForm: {
// 用户名
username: '',
// 密码
password: '',
// 邮箱
email: '',
// 手机
mobile: ''
}
:rules=“addFormRules”：绑定addFormRules来实现验证规则
// 添加用户的表单的验证规则对象
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' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
}
ref=“addFormRef”：此为表单的引用
2.添加用户信息
当用户关闭对话框时 要对对话框表单内容进行重置
用@close监听对话框的关闭事件
// 监听用户对话框的关闭 从而完成对话框的重置
addDialogClosed() {
this.$refs.addFormRef.resetFields();
}
当用户点击确定按钮的时候 调用添加用户api 完成用户添加
// 点击按钮添加用户
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('添加用户失败!');
}
// 隐藏添加用户的对话框
this.addDialogVisible = false;
// 添加用户成功后重新获取用户列表
this.getUserList();
this.$message.success('添加用户成功!');
});
}
7. 修改用户信息
- 与添加用户信息类似 将使用到el-dialog
<!-- 修改用户对话框-->
<el-dialog
@close="editDialogClosed"
title="修改用户"
:visible.sync="editDialogVisible"
width="50%">
<!-- 内容主体区域-->
<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="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="editUserInfo">确 定</el-button>
</span>
</el-dialog>
同样的监听关闭事件 关闭时重置表单内容
// 监听修改对话框的关闭事件 从而完成对修改表单的重置
editDialogClosed() {
this.$refs.editFormRef.resetFields();
}
同样的绑定验证规则
// 修改用户的表单的校验规则
editFormRules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
}
但用户名不可更改 所以要给用户名的el-input添加disabled属性
且修改之前要先通过用户id查询到修改前的用户信息 并渲染到表单中
// 修改用户信息时查询到的原用户信息
editForm: {}
// 展示修改用户信息的对话框
async showEditDialog(id) {
// 根据要求改的用户的id值来查询用户信息
const {data: res} = await this.$http.get('users/' + id);
if (res.meta.status !== 200) {
return this.$message.error('获取该用户信息失败!');
}
// 查询成功就将数据保存到data中的editForm中
this.editForm = res.data;
// 打开修改用户的对话框
this.editDialogVisible = true
}
当点击确定时 调用修改用户信息的api 完成用户信息修改
// 修改用户信息并提交
editUserInfo() {
this.$refs.editFormRef.validate(async 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.$message.success('修改用户信息成功!');
// 修改成功关闭对话框
this.editDialogVisible = false;
// 修改成功后重新获取用户信息列表
this.getUserList();
});
}
8 删除用户信息
- 删除要使用el-message-box 还是按需导入并挂载
- 为删除按钮绑定事件
// 根据id删除对应的用户信息
async removeUserById(id) {
// 弹框询问是否删除数据
const confirmResult = await this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => {
return 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();
}
1678
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
