vue【获取用户列表并实现分页】

<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-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-table :data="userlist" border stripe>
		    	<el-table-column type="index" label="#"></el-table-column>
		    	<el-table-column prop="name" label="姓名"></el-table-column>
		      	<el-table-column prop="date" label="日期"></el-table-column>
		      	<el-table-column prop="address" label="地址"></el-table-column>
		      	<el-table-column label="状态">
		      		<template slot-scope="scope">
		      			<el-switch v-model="scope.row.state"></el-switch>
		      		</template>
		      	</el-table-column>
		      	<!--通过作用于插槽渲染操作列-->
		      	<el-table-column label="操作">
		      		<template slot-scope="scope">
		      			<!--修改按钮-->
		      			<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
		      			<!--删除按钮-->
						<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
						<!--设置按钮-->
						<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>
		    </el-table>
			
			<!--分页区域-->
			<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>
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				//静态用户列表数据
				userlist: [{
		            date: '2016-05-02',
		            name: '王小虎',
		            address: '上海市普陀区金沙江路 1518 弄',
		            state:true
		          }, {
		            date: '2016-05-04',
		            name: '王小虎',
		            address: '上海市普陀区金沙江路 1517 弄',
		            state:false
		          }, {
		            date: '2016-05-01',
		            name: '王小虎',
		            address: '上海市普陀区金沙江路 1519 弄',
		            state:true
		          }, {
		            date: '2016-05-03',
		            name: '王小虎',
		            address: '上海市普陀区金沙江路 1516 弄',
		            state:true
		        }],
		        //当前用户列表对象
		        queryInfo:{
		        	pagenum:1,//当前页数
		        	pagesize:2//当前页有多少条数据
		        },
		        total:100//总页数
			}
		},
		
		created:{
			this.getuserlist()
		},
		
		methods:{
			//动态获取用户数据
			async getuserlist(){
				const {data:res} = await this.$http.get('user',{
					params: this.queryInfo
				})
				
				if (res.data.status !== 200){
					return this.$message.error("获取用户信息失败")
				}
				this.userlist = res.data.users
				this.total = res.data.total
			},
			
			//监听pagesize改变的事件
			handleSizeChange(newSize){
//				console.log(newSize);
				this.queryInfo.pagesize = newSize
				//重新发送数据请求
				this.getuserlist()
			},
			handleCurrentChange(newPage){
				//console.log(newPage);
				this.queryInfo.pagenum = newPage
				//重新发送数据请求
				this.getuserlist()
			}
		}
	}
</script>

<style lang="less" scoped>
</style>

效果图如下：