layui分页功能在vue写的H5中实现

layui分页原文档：https://www.layui.site/doc/modules/laypage.html

文档介绍的比较简单，实际用起来我走了很多弯路：

1.count总数从接口返回，需要重新封装分页的方法(方法名flushPage)然后传值，传值回传数据总数和当前limit

complete: () => {
	if(curr==1){
		this.flushPage(this.countNum,limit)
	}
}

2.只有在页码等于1的时候调用分页的方法，要不然导致数据出来了但是分页页码不显示；

说的比较乱，具体代码如下：

//调用接口  接口名getDataDetails
getDataDetails1: function(curr,limit) {
	var postData = {
		key:this.searchInput,
		school:this.school,
		type:this.type,
		houseState:this.houseState,
		userState:this.userState,
		pageNumber:curr,//得到当前页
		pageSize:limit,//得到每页显示的条数				
	}				
	console.log(postData);
	$.ajax({
		url: commonUrl + '/getDataDetails',
		type: 'GET',
		dataType: "json",
		data: postData,
		header: {
			'content-type': 'application/x-www-form-urlencoded',
		},
		success: (data) => {
			console.log(data.Result)
			if (!data.isError) {
				this.list = data.Result.data;
				//外部定义countNum 并将接口返回总数传值
				this.countNum = data.Result.count;	
			} else {
				alert(data.Result)
			}
		},
		error: () => {
		},
		complete: () => {
			if(curr==1){
			//调用封装的分页方法 将总数及当前每页显示多少条数据传值
				this.flushPage(this.countNum,limit)
			}
		}
		})
},

//分页
	flushPage(count,limit){
	//接受接口传的值
	console.log(count)
	layui.use('laypage', function(){
		var laypage = layui.laypage;
		//执行一个laypage实例
		laypage.render({
		elem: 'demo7',//此处绑定页面中分页功能div的id  <div id="demo7"> </div>
		count: count,//动态取值
		// limit:50,
		limit:limit,//动态取值
		limits:[10, 20, 30, 40, 50],
		layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh'	],
		jump: function(obj, first){
			//obj包含了当前分页的所有参数，比如：
			console.log(obj);
			console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
			console.log(obj.limit); //得到每页显示的条数
			//首次不执行
			if(!first){
				ve.getDataDetails1(obj.curr,obj.limit);
				//页码改变时传值
			}
		},
		theme: '#83a9f070'//自定义页码框颜色
		});
	});
}