前端写分页 利用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 )
},

上一篇下一篇

猜你喜欢

热点阅读