vue分页实现

1，在一个div里面

  

    
  
  共100条
  共100页

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

 changePage(indexPage) {

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

   this.data1 = this.mockTableData1(indexPage);

 }, 

3，网络请求

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

  var data = new URLSearchParams();

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

  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),

 

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