vue如何实现分页功能(element ui),模板(template)中写。
<el-pagination
background
layout="total, sizes, prev, pager, next, jumper"
:current-page="pageNumber"
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
data中定义pageNumber,pageSize,以及 total。
pageNumber: 1,
pageSize: 10,
total: 0,
发请求获取数据时,传参传入pageNumber以及pageSize。
// 获取表格数据
tableList() {
let data = {
apiName: this.searchForm.serviceName,
apiGroup: 1,
pageNumber: this.pageNumber,
pageSize: this.pageSize,
apiState: this.value,
}
getData(data).then((res) => {
if (res.code == 200) {
this.tableData = res.result.configApiTbList
this.total = res.result.totalCount
} else {
this.$message({
message: res.message,
type: 'error',
})
}
})
},
写handleSizeChange以及handleCurrentChange函数,并在事件中再次调用获取数据的事件。
// 分页
handleSizeChange(pageSize) {
this.pageSize = pageSize
this.tableList()
},
handleCurrentChange(pageNumber) {
this.pageNumber = pageNumber
this.tableList()
},