从Dclould下载的插件  链接:简单实用的分页器 - DCloud 插件市场

<!-- 分页 -->
<page-pagination v-show="show" :total="page.total"
 :showAround="true" :btnText="true" :forceEllipses="true" @change="change">
</page-pagination>

data() {
	return {
		page: {
			total: '', //总页数
			pageSize: 10, //每页条数
			pageNum: 1 //默认当前页
		}
	}
},

 

    //监听页数变化
			change(pageNum, type) {
				this.page.pageNum = pageNum;
				console.log("点击了" + type + "，当前页：" + pageNum);
			}

 

 后台将数据存放在数组里  通过向后台发送当前页数以及每页的条数来请求数据

 

 

//设备分页(封装了接口 queryPage方法)
export const queryPage = (pageNum, pageSize) => {
	return request({ 
        //拿着参数去请求数据
		url: `system/camera/list/last?pageNum=${pageNum}&pageSize=${pageSize}`,
	})
}


methods:{
            //预加载第一页数据
			onFstPage() {
				queryPage(this.page.pageNum, this.page.pageSize).then(res => {
					console.log(res);
					this.list = res.rows
					//总页
					this.page.total = res.total
				}) 
			},
            //监听页数变化  点击了页数就要请求一下
 			change(pageNum, type) {
				this.page.pageNum = pageNum;
				console.log("点击了" + type + "，当前页：" + pageNum);

				//实现点击加载相应页
				queryPage(this.page.pageNum, this.page.pageSize).then(res => {
					this.page.pageNum = pageNum;
					this.list = res.rows
				})
			}

},
onLoad(){
    this.onFstPage()  //自动加载
}

 效果:

 

写死的每页10条数据(插件封装的好像也是10条)  如果要换成别的的话可能还要拿获取的总数据再÷一下叭