Vue+element实现分页查询

1 使用环境

• Vue
• Element 新版

用element的组件el-pagination来实现表格分页操作

2 代码

el-pagination属性

page属性

page:{
        //当前页码
        index:1,
        //每页展示数据数目
        size:2,
        // 总共数据数目
        total:10
      },

页码改变值函数

 // 监听页码值改变事件
    handleCurrentChange(currentPage){
      // 改变当前页码
      console.log(currentPage)
      this.page.index = currentPage;
      console.log(this.page.index)
      // 重新获取数据
      this.getTableData()
    },

3 实现效果

实现效果图

4 踩坑

elpagination中的total属性没明白，将total设为2，我认识每页展示的数据直接由展示的表格决定，就没有设置page-size，无法点击页码的左右箭头。但是加上之后，就能点击。

因为页码的计算是由total总数来除每页显示的数据量得到的，所以page-size,total都需要进行绑定

element官网介绍

5 代码