<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="page"
:page-sizes="[10]"
:page-size="limit"
layout="total, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
export default{
data(){
page: 1, // 分页 页数
limit: 10, // 分页 当前条数
total: null, //分页 总条数
tableList: [], // 分页数据
tableData:{itemList:[]}, // 页面总数据
},
async created(){
await this.init()
},
methods:{
// 获取总数据
async init(){
this.tableData = await XXXX()
},
// 分页处理数据
getList() {
this.tableList = this.tableData.itemList.filter((item, index) => {
return index < this.page * this.limit && index >= this.limit * (this.page - 1)
})
this.total = this.tableData.itemList.length
},
// 当每页数量改变
handleSizeChange(val) {
console.log(`每页${val}条`);
this.limit = val
this.getList()
},
// 当当前页改变
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.page = val
this.getList()
},
}
}