VUE+elementUI分頁
阿新 • • 發佈:2019-01-06
<el-col :span="24" class="toolbar pageBar">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage1"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout=" prev, pager, next, sizes, total"
:total="total" >
</el-pagination>
</el-col>
<script>
export default {
return {
currentPage1: 1,
total: 0,
page: 1,
pageSize: 10,
pageNum:1
}
},
methods: {
//獲取圖表列表
getUser : function () {
let para = {
pageNum: this.pageNum,
pageSize: this.pageSize,
};
this.loading = true;
getList(para).then((res) => {
if(res.data.success){
this .total = res.data.data.total;
this.currentPage1 = res.data.pageNum;
this.users = res.dataList;
this.loading = false;
}else{
this.loading = false;
this.$message({
message: res.data.returnMsg,
type: 'error'
});
}
})
},
//pageSize改變時
handleSizeChange(val) {
this.pageSize = val;
this.getUser();
},
//pageNum改變時
handleCurrentChange(val) {
this.pageNum = val;
this.getUser();
},
},
mounted() {
this.getUser();
}
};
</script>
- size-change pageSize 改變時會觸發 每頁條數size current-change
- currentPage 改變時會觸發 當前頁currentPage