vue + element-ui 实现分页效果

我使用得是el-table+el-pagination来实现的，

话不多说，直接上代码

  
    
      
      
      
      
      
      
      
      
      
        
      
    

    
    

    
    
    export default {
  name: "Dashbord",
  components: {
    Dialog
  },
  inject: ["reload"], //注入reload方法
  data() {
    return {
      showData:[],
      total: 0,
      pageSize: 10,
      listLoading: false,
      currentPage:1,
    };
  },
  created(){
    this.getUsers();
    this.showTable(this.currentPage,this.pageSize);
  },
  // mounted() {
  //   this.getUsers();
  // },
  methods: {
   handleSizeChange: function (size) {
      this.pageSize = size;
      console.log(this.pageSize);  //每页下拉显示数据
      this.showTable(this.currentPage,this.pageSize);
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage);  //点击第几页
      this.showTable(this.currentPage,this.pageSize);

    },
    showTable(currentPage,pageSize){
      this.listLoading = true;
      this.$axios({
        method: "POST",
        url: "http://localhost:8080/api/pagingQuery",
        changeOrigin: true,
        data: {
          "start":currentPage,
          "pageSize":pageSize
        }
      }).then(result => {
        this.listLoading = false;
        this.showData = result.data;
      });
    }
  },
};

在el-table中，最重要的是:data,这个数据是根据你分页效果去后台请求返回的数据。
在el-pagination中，:page-size表示每页显示的数据条数；
:total：表示总的数据数量；
:page-sizes：表示我们可以自定义每页显示的数量；
:currentPage:表示当前的页码；
@size-change=“handleSizeChange”，@current-change=“handleCurrentChange” 是el-pagination中的事件，表示每页显示的数据和页码的变化；
layout:表示分页栏的布局;
background:表示是否带背景色

需要主要的是start变量，因为在后台程序中，我使用的是limit（m,n）来进行分页查询的:

select * from list limit #{start},#{pageSize}

start表示开始查询的位置，pageSize表示从开始位置要查询的数量；
如果后台没有做start的处理，在这里我们可以在showTable方法中做处理：

currentPage = (currentPage-1) * pageSize；

这样就能够正确查询数据