一、添加控件
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[30, 25, 20, 15,10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total=suiteList.length>
</el-pagination>
二、js部分
data() {
return {
suiteData: [],
suiteList: [],
pageSize:10,
currentPage: 1
};
},
mounted() {
this.getData();
},
methods:{
//获取数据
getData() {
this.$axios.get("/api/testCase").then((res)=> {
this.caseList= res.data.result;
this.getPageData()}
);
},
// 根据分页设置的数据控制每页显示的数据条数及页码跳转页面刷新
getPageData() {
let start = (this.currentPage - 1) * this.pageSize;
let end = start + this.pageSize;
this.caseData = this.caseList.slice(start, end);
},
// 分页自带的函数，当pageSize变化时会触发此函数
handleSizeChange(val) {
this.pageSize = val;
this.getPageData();
},
// 分页自带函数，当currentPage变化时会触发此函数
handleCurrentChange(val) {
this.currentPage = val;
this.getPageData();
}
}
三、实现效果
image.png
