<template>
<div>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card class="box-card">
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" class="input-with-select">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="3">
<el-button type="primary">添加用户</el-button>
</el-col>
</el-row>
</el-card>
<template>
<el-table
:data="userlist" stripe style="width: 100%">
<el-table-column type="index" ></el-table-column>
<el-table-column prop="username" label="姓名" width="180"></el-table-column>
<el-table-column prop="email" label="邮箱" width="180"></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 prop="mg_state" label="状态">
<template slot-scope="scope">
{{scope.row}}
</template>
</el-table-column>
<el-table-column label="操作"></el-table-column>
</el-table>
</template>
</div>
</template>
<script>
export default {
data(){
return{
//获取用户列表的参数对象
queryInfo:{
query:'',
pagenum:'2',
pagesize:'2'
},
userlist:[],
total: 0,
// tableData: [{
// username: '王小虎',email: 'tige112@163.com',
// mobile: '18616358651',role_name: '',
// }]
}
},
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.users
this.total = res.data.total
}
}
}
</script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.el-main{
line-height: 10px!important;
}
.box-card {
width: 100%;
}
.el-card {
border: 0!important;
border-radius: 0!important;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
}
.el-table{padding: 0 24px 24px!important;box-sizing: border-box}
</style>
