vue分页实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30299243/article/details/82191423

1，在一个div里面

<div style="margin: 10px;overflow: hidden" class="pagination">
  <div class="pag">
    <Page :current="1" @on-change="changePage($event)" :total="100" class="pages"></Page>
  </div>
  <span class="tol">共100条</span>
  <span class="tol">共100页</span>
</div>

2，methods 里面 点击上一页或者下一页的时候重新从服务器获取数据

 changePage(indexPage) {

//  alert(indexPage)  打印当前的页码数

   this.data1 = this.mockTableData1(indexPage);

 }, 

3，网络请求

/*表格分页*/
mockTableData1(num) {
  let dataarray = [];

  var data = new URLSearchParams();

  data.append('page', num);//把页码传给后台

扫描二维码关注公众号，回复： 3033611 查看本文章

  data.append('size', 10); //一页要显示多少数据

  axios.post('接口url', data).then(function (res) {

    //  console.log(res)  打印解析的结果
    if (res.data.error == 0) {

      for (let i = 0; i < res.data.data.length; i++) {

        dataarray.push({  //下面是解析的数据，根据自己的情况而定
          number: res.data.data[i].orderNum,
          text: res.data.data[i].travelTitle,
          time: res.data.data[i].createTime,
          name: res.data.data[i].contactName,
          phone: res.data.data[i].contactPhone
        })
      }
    } else {
      // alert(res.data.msg);  错误码
    }
  }).catch(function (error) {
    // alert(error);
  });
  return dataarray;

},

4，date里面

data1: this.mockTableData1(1),

由此一个简单的点击分页器就算是写完了，不足之处还望见谅！