用户列表

路由展示

  • 实现点击左侧用户列表选项,展示用户列表组件。创建Users.vue组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div>
<h3>用户列表</h3>
</div>
</template>

<script>
export default {
name:'Users'
}
</script>

<style lang='less' scoped>
</style>
  • 然后配置路由规则
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Users from '../components/user/Users'
Vue.use(VueRouter)

const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
{ path: '/welcome', component: Welcome },
{ path: '/users', component: Users }
]
}
]
})
  • 选中选项要有激活高亮效果,通过菜单的属性default-active="/users"实现。路由路径可以通过$route获取
1
<el-menu :default-active="$route.path"></em-menu>

视图绘制

  • 使用到的UI组件有Breadcrumb 面包屑、Card 卡片和栅格布局
    • 栅格布局中每一行24格,用:span控制格数。:gutter="20"控制间距
  • 在用户组件Users.vue中编写代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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 class="box-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>
</template>

<script>
export default {
name: 'Users',
}
</script>

<style lang='less' scoped>
</style>
  • 对于UI组件的样式调整,最后写在全局样式global.css
1
2
3
4
5
6
.el-breadcrumb{
margin-bottom: 15px;
}
.el-card{
box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}

获取数据

  • 请求路径:users,请求类型:get,请求参数如下
参数名 参数说明 备注
query 查询参数 可以为空
pagenum 当前页码 不能为空
pagesize 每页显示条数 不能为空
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
export default {
name: 'Users',
data(){
return {
// 获取用户列表的参数对象
queryInfo:{
query:'', // 查询参数
pagenum: 1, // 当前页码
pagesize: 2 // 每页显示条数
},
// 保存用户列表数据
userList:[],
total: 0 // 总数据条数
}
},
created(){
this.getUserList()
},
methods:{
async getUserList(){
// 返回Promise函数对象
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
}
}
}
  • 使用UI组件Table 表格渲染用户列表数据,大致介绍如下
    • el-table中使用:data="userList"绑定数据对象
    • el-table-column中使用label="xx"指定列名,使用prop="xxx"指定对象里的属性数据渲染到表格中
1
2
3
4
5
6
7
8
9
10
<!--用户列表区-->
<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"></el-table-column>
<el-table-column label="操作"></el-table-column>
</el-table>

完善表格

  • 状态一列值为布尔值,可以通过作用域插槽slot-scope="scope"获取数据,其中scope.row代表获取一列的数据
1
2
3
4
5
6
7
<el-table-column label="状态">
<!--作用域插槽,定位每一行都有不同的布尔值-->
<template slot-scope="scope">
<!--开关组件--双向绑定布尔值-->
<el-switch v-model="scope.row.mg_state"> </el-switch>
</template>
</el-table-column>
  • 通过作用域插槽来渲染操作列,使用到了Tooltip 文字提示组件,注意:布尔值一定要双向绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<!-- 修改按钮-->
<el-tooltip effect="dark" content="修改用户" placement="top" :enterable="false">
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
</el-tooltip>
<!-- 删除按钮-->
<el-tooltip effect="dark" content="删除用户" placement="top" :enterable="false">
<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
</el-tooltip>
<!-- 分配角色按钮 -->
<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
</el-tooltip>
</template>
</el-table-column>

分页效果

  • 首先按需导入Pagination 分页组件,大致介绍如下
1
2
3
4
5
6
7
@size-change="handleSizeChange"       // 监听 pagesize改变的事件
@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" // 总页数
1
2
3
4
5
6
7
8
9
10
11
<!--分页条-->
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
export default {
name: 'Users',
data() {
return {
// 获取用户列表的参数对象
queryInfo: {
query: '', // 查询参数
pagenum: 1, // 当前页码
pagesize: 2, // 每页显示条数
},
// 保存用户列表数据
userList: [],
total: 0, // 总数据条数
}
},
created() {
this.getUserList()
},
methods: {
async getUserList() {
// 返回Promise函数对象
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
console.log(this.userList)
},
// 监听 pagesize改变的事件
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
// 重新发送请求获取数据
this.getUserList()
},
// 监听 页码值改变的事件
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage
this.getUserList()
},
},
}

修改用户状态

  • switch开关状态发生变化时有一个回调事件change。然后发送请求修改用户状态即可
  • 请求路径:users/:uId/state/:type, 请求方法:put,请求参数如下
参数名 参数说明 备注
uId 用户 ID 不能为空携带在url中
type 用户状态 不能为空携带在url中,值为 true 或者 false
1
2
 <!--开关组件--双向绑定布尔值-->
<el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)"> </el-switch>
1
2
3
4
5
6
7
8
9
10
// 监听switch开关状态的改变
async userStateChange(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('用户状态修改成功')
}

实现搜索功能

  • 使用搜索功能采用输入框和data中的queryInfo.query双向绑定,配合发送请求的函数即可
  • 其中使用到了输入框的clearable属性,表示可以清除输入框,其有一个回调函数clear,可以用来重新发送请求获取全部数据
1
2
3
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
export default {
name: 'Users',
data() {
return {
// 获取用户列表的参数对象
queryInfo: {
query: '', // 查询参数
pagenum: 1, // 当前页码
pagesize: 2, // 每页显示条数
},
// 保存用户列表数据
userList: [],
total: 0, // 总数据条数
}
},
created() {
this.getUserList()
},
methods: {
async getUserList() {
// 返回Promise函数对象
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
console.log(this.userList)
},
// 监听 pagesize改变的事件
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
// 重新发送请求获取数据
this.getUserList()
},
// 监听 页码值改变的事件
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage
this.getUserList()
},
// 监听switch开关状态的改变
async userStateChange(userInfo) {
console.log(userInfo.mg_state)
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('用户状态修改成功')
}
},
}