user.vue
1.82 KB
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getUser">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<template>
<el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;">
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120" sortable>
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column prop="age" label="年龄" width="100" sortable>
</el-table-column>
<el-table-column prop="birth" label="生日" width="120" sortable>
</el-table-column>
<el-table-column prop="addr" label="地址" min-width="180" sortable>
</el-table-column>
</el-table>
</template>
</section>
</template>
<script>
import { getUserList } from '../../api/api';
import NProgress from 'nprogress'
export default {
data() {
return {
filters: {
name: ''
},
loading: false,
users: [
]
}
},
methods: {
//性别显示转换
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
//获取用户列表
getUser: function () {
let para = {
name: this.filters.name
};
this.loading = true;
NProgress.start();
getUserList(para).then((res) => {
this.users = res.users;
this.loading = false;
NProgress.done();
});
}
},
mounted() {
this.getUser();
}
};
</script>
<style scoped>
</style>