前端写分页 利用element
2021-08-06 本文已影响0人
张宪宇
1.Element 分页组件
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage2"
:page-size=xxx(一页显示多少条)
:current-page.sync=xxx(当前在第几页)
layout="sizes, prev, pager, next"
:total=xxx(总条数)>
</el-pagination>
2. 后端传过来的总条数 前端进行分割处理
this.tableDataList 总数据
this.tableData 渲染在表格的数据
this.tableData = this.tableDataList.slice(
Number(this.page - 1) * 10,
Number(this.page) * 10
)
change事件也是上述2的代码
3.弹框形式
// 删除合同单行
deleteRow (id) {
this.tableData.splice( (Number(this.submitForm.pageNum - 1) * 10)+(index-0), 1 )
if(this.tableDataList.length==1 && this.submitForm.pageNum != 1){
this.submitForm.pageNum = this.submitForm.pageNum - 1
}
this.tableDataList = this.tableData.slice( Number(this.submitForm.pageNum - 1) * 10, Number(this.submitForm.pageNum) * 10 )
},
//弹窗组件
selectInvoiceData(data){
this.tableDataList = this.tableData.slice(0,Number(this.submitForm.pageNum) * 10)
this.tableDataList = this.tableData.slice(
Number(this.submitForm.pageNum - 1) * 10,
Number(this.submitForm.pageNum) * 10
)
}
},
//切换分页
currentChange(page) {
this.submitForm.pageNo = page;
this.applyDetail()
this.tableDataList = this.tableData.slice( Number(page - 1) * 10, Number(page) * 10 )
},