使用vue-pagination实现真分页和假分页

1、vue-pagination官网介绍

https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/pagination.html#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F

2、什么是真分页和假分页

假分页：从数据库中取出所有的数据，然后分页在界面上显示。访问一次数据库，但由于选择的数据量比较大，所以第一次花费时间比较长，但之后每一页的显示都是直接、快速的，避免对数据库的多次访问。

真分页：确定要显示的数量和内容，然后每次都去数据库取出该少量数据，优点是数据量小，缺点是访问数据库频繁。在大型网站中往往采用真分页，比如百度的图片获取。

 3、实现真分页（前提是服务端实现了分页功能）

• 在vue中引入pagination分页组件

• 不要忘记注册组件： 

•  数据类型

 data() {
    return {
  
      total: 0,  //总数
      listQuery: {
        page: 1, //当前页数
        limit: 10 //每页个数
      },
     }
  }

• 获取数据的函数操作 

/*  分页获取全部用户数据 */ 
 getList() {
      var vm = this;
      vm.listLoading = true;
      vm.axios
        .get("http://39.106.***.***:81/user", {
          params: { page: vm.listQuery.page }  //第几页
        })
        .then(function(resp) {
          if (resp.data.success) {
            vm.total= resp.data.data.total  //重新设置数据总数
            vm.listQuery.limit= resp.data.data.pageSize //重新设置每页数据个数
            vm.users = resp.data.data.list   //返回的数据赋值给 要展示的users数据集
            vm.$message({
              message: "获取数据成功",
              type: "success"
            });
            vm.listLoading = false;
          
          } else {
            vm.$message.error('获取数据失败');
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

4、实现假分页 

• 引入组件

这里的limit是每页多少个，如图：

• 不要忘记注册组件： 

 

•  定义同样的数据：

 data() {
    return {
      total: 0,  //总数
      listQuery: {
        page: 1, //当前页数
        limit: 10 //每页个数  设置一个默认值
      },
      //总的数据集合
      picList:[ 
   
      ],
      //要展示的数据集合
      picList2:[
       
      ],

     }
  }

• 使用js的slice函数实现假分页

避坑：使用slice，不要使用splice 。

created()函数调用一次getPic() 来获取所有的数据集合

   /* 获取所有轮播图  */  
    getPic(){
      var vm =this;
       /*  TODO: 获取帖子列表 */
       vm.listLoading=true;
        this.axios.get('http://39.106.***.***:81/mainpic',{
          }
          ).then(function (resp) {
          if(resp.data.success){
            vm.picList=resp.data.data;
            vm.total=vm.picList.length
            vm.picList2=vm.picList.slice(0,vm.listQuery.limit);  //初始化一下展示数据集         
            vm.$message({
              message: '获得轮播图成功',
              type: 'success'
            });
             vm.listLoading=false;    
          }else{
            vm.$message.error("获得轮播图失败");
          }
        }).catch(function (error) {
          console.log(error)
        });
    },

• 分页获取数据的操作

  getList() {
      var vm=this
      vm.listLoading=true; 
      vm.picList2=vm.picList.slice((vm.listQuery.page-1)*vm.listQuery.limit,(vm.listQuery.page)*vm.listQuery.limit)
      vm.listLoading=false;
    },

如果有删除操作： 

 //移除
vm.posts.splice(index+(vm.listQuery.page-1)*vm.listQuery.limit,1);
vm.posts2.splice(index,1);
vm.total=vm.total-1;

[]~(￣▽￣)~*  如果对你有帮助，不要忘记点赞+关注哦~