① created 生命周期函数
created() {
this.getUserList()
},
② 在 methods中 定义 getUserList()函数
async getUserList(){
const { data:res } = await this.$http.get('user',{
params: this.queryInfo
})
if (res.meta.status !== 200){
return this.$message.error('获取用户列表失败!')
}
this.userlist = res.data.users
this.total = res.data.total
console.log(res)
}
}
③ 在 data中 定义相关变量
data() {
return {
// 获取用户列表的参数对象
queryInfo: {
// 查询参数 可以为空
query: '',
// 当前页码 不能为空
pagenum: 1,
// 每页显示条数 不能为空
pagesize: 2
},
// 所有的用户列表
userlist: [],
// 总数据条数
total: 0
}
页面代码
<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="8">
<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",
data() {
return {
// 获取用户列表的参数对象
queryInfo: {
// 查询参数 可以为空
query: '',
// 当前页码 不能为空
pagenum: 1,
// 每页显示条数 不能为空
pagesize: 2
},
// 所有的用户列表
userlist: [],
// 总数据条数
total: 0
}
},
created() {
this.getUserList()
},
methods:{
async getUserList(){
const { data:res } = await this.$http.get('user',{
params: this.queryInfo
})
if (res.meta.status !== 200){
return this.$message.error('获取用户列表失败!')
}
this.userlist = res.data.users
this.total = res.data.total
console.log(res)
}
}
}
</script>
<style scope lang="less">
</style>