vue实现列表数据分页

在开发过程中，当数据不是非常多的时候，前端来处理列表数据的分页，下面分享几个关键的步骤代码。

1、请求全部数据过来

 getList(){

          let params = {

             inParams:{

             }

          }

          this.$axios({url:httpUrl.assetsIpArea.ipQuery,method:'post',params:params}).then((res) =>{

              console.log(res,'----')

              if(res.columnList){

                 this.tableDataHeader = res.columnList

              }

              if(res.valueList && res.valueList.length > 0){

                  this.tableDataMsg = res.valueList   //存放全部数据

                  this.tableData = res.valueList         //存放全部数据 处理关键字查询时会用到

                  this.total  = res.valueList.length

              }

              this.pageList()

          })

    }

2.分页处理 pageList()方法

pageList() {

      let $self = this;

      $self.tableDataMsgList = $self.tableDataMsg.filter(

        (item, index) =>

          index < $self.queryArgs.pageNum * $self.queryArgs.pageSize &&

          index >= $self.queryArgs.pageSize * ($self.queryArgs.pageNum - 1)

      );

      console.log(this.tableDataMsgList,'这个是当前页的数据吗？')   //这个是其中一页的默认10条数据

      $self.total = $self.tableDataMsg.length;

    },

3、这个是使用element-ui中分页器进行处理分页

 

          @size-change="handleSizeChange" 

          @current-change="handleCurrentChange" 

          :current-page="queryArgs.pageNum" 

          :page-sizes="[10, 20, 30, 40]" 

          :page-size="queryArgs.pageSize" 

          layout="total, sizes, prev, pager, next,jumper" 

          :total="total"

        >

4、切换分页以及改变pageSize的方法

 handleSizeChange(val) {

      this.$refs.tableList.clearSort()    //这个是用来清除当前页的排序

      this.queryArgs.pageSize = val;

      this.queryArgs.pageNum = 1;

      this.pageList();

    },

  handleCurrentChange(val) {

      console.log(this.$refs.tableList,'reffff')

      this.$refs.tableList.clearSort()    //这个是用来清除当前页的排序

      this.queryArgs.pageNum = val;

      this.pageList();

    },

到此，这个前端处理分页就结束了，下一篇来分享前端来实现表格数据列表上的排序