和上一个不使用limit的不同,如果不使用后台的限制,那么就必须自己定义一个计算属性,并且v-for这个计算的数组,而如果要用到后台的限制,那么就不需要自己计算,v-for的直接就是后台获取的数组
1.v-for (list为后台获取的)
<div v-for="item in list" :key="item.id">{{item.title}}</div>
2.定义el-pagination (和上一个例子几乎一样)
<el-pagination
layout="prev, pager, next"
background
prev-text="上一页"
next-text="下一页"
:total= "listNumber"
:pager-count="5"
:page-size="3"
@current-change="changePage"
>
3.定义几个属性
listNumber: 0,
loading: false,
otherDialogVisible: false,
pageNum: 1,
pageNumber: 0,
list: []
4.从后台获取数据,并且利用数据定义页码 (别忘记在mounted 里注明开始获取的时间)
async getList () {
this.loading = true
let params = {
type: 1,
limit: 3,
page: this.page
}
const res = await decision(params)
if (res.data.code === 1) {
this.list = res.data.data
console.log(this.list)
} else {
this.$message({type: 'success', message: res.data.msg})
}
let params2 = { //再定义一个是因为上文的params有limit属性,导致params的长度并非原有的长度,而是limit的长度
type: 1
}
const res2 = await decision(params2)
this.listNumber = res2.data.data.length
this.pageNumber = Math.ceil(res2.data.data.length / params.limit)
this.loading = false
}
5.定义翻页的方法
changePage (e) {
this.page = e
this.getList()
}