前端分页分条实现

data:{
  return {
    tableData:[],
   page:{ // 部门的分页
          currentPage:1,
          pageSize:10,
          pageTotal:undefined
        },
             }
}
computed: { 
    getPagedData(){
      this.page.pageTotal = this.tableData.length
      let tableDatas = JSON.parse(JSON.stringify(this.tableData))
      // tableData.splice()
      let arr = []
      if(this.page.currentPage==1){
       arr = tableDatas.splice(0,this.page.pageSize-1)
      }else{
        arr = tableDatas.splice((this.page.currentPage-1)*this.page.pageSize,this.page.pageSize)
      }
      return arr

    }
   },
methods:{
 handleSizeChange(val) {
      this.page.pageSize = val
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
    },
}
 
在table中渲染数据的时候就使用,computed中定义的getPagedData;

你可能感兴趣的:(前端分页分条实现)