vue使用分页

vue2.0结合element-ui实现分页功能

• 大体结构

<div class="block">
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"//下拉框可以选择的，选择一夜显示几条数据
    :page-size="pagesize"//当前业显示的条数
    layout="prev, pager, next"
    :total="len">//这个是总共有多少条数据
  </el-pagination>
</div>
    data() {
      return {
            articleInfoList: [],//每页显示的数据
            articleList: [],//所有的数据
            currentPage: 1,//当前页
            len: 0,//默认总的数据长度
            pagesize: 2,//默认每页显示的数量
      };
    }
  },
    methods: {
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }

方法有两种，第一种是处理后台传过来的总数据，不需要后台接口
第二种是后台写接口

根据获取到的总数据处理

    created(){
        Vue.axios.post('/api/article')
            .then(res => {
                this.articleList = res.data;    
                this.len = res.data.length;
                this.handleInfo();

            })
            .catch(err => console.log(err))     
    },
    methods: {
         handleInfo() {
          // 页数，如果有小数，只取整数部分
          let pageNum = Number(String(this.len / this.pagesize).split(".")[0]);
          // 定义一个空数组
          let newArr = [];
          // 遍历获取的数据，每次遍历都从数组的0位置开始截取，截取数量为每页显示的数量
          for (let i = 0; i < pageNum; i++) {
            newArr.push(this.articleList.splice(0, this.pagesize));
          }
          // 判断剩余的数据有没有小于每一页的数量，如果小于，就把剩余的数据放进newArr数组
          if (this.articleList.length < this.pagesize) {
            newArr.push(this.articleList.splice(0, this.articleList.length));
          }
          // 将新的数组赋给articleList[],用来渲染页面
          this.articleList = newArr;
          // 第一次进入页面显示this.articleList[]数组的第一个元素
          this.articleInfoList = this.articleList[0]
        },
        currentPageNum(currentPage) {
          // currentPage为当前的页数
          // 显示当前页数对应的数据
          this.articleInfoList = this.articleList[currentPage - 1];
        }

后端写分页接口

//获取文章列表（分页）
router.post('/articlePage',function(req, res){
    var getpageNum = req.body.pageNum;//前台传入的参数   
    var startPage = parseInt(getpageNum * 10);//每次查找的起始点
    var limitNum = '10';//位置偏移，也就是每次需要查询的条数
    //limit 是重点,
    var sql = `SELECT * FROM article_table limit ${startPage},${limitNum}`
    db.query(sql,function(err,doc){
        if (err) {
          console.log('数据库错误'+ err)
        } else {
            res.send(doc).end();
        }
    })
})

• 前台
  直接渲染每页的数据就好

currentPageNum(val) {
    var getpageNum = parseInt(val - 1);
    Vue.axios.post('/api/articlePage',{//获取的是后台分页接口
      pageNum: getpageNum
    })
    .then((res)=>{          
        this.articleInfoList = res.data //返回每页的数据
    })
        this.currentPage = val;
}