elementUI分页

• 后台是有未分页的所有的数据的
• 当每页数据量以及当前页发生改变时,才进行重新分页
• 前台在一次请求只需要返回给后台一个页面的数据而已

根据这三点你就可以得到得到返回给后台每页的数据的begin、end索引在总数据中所处的位置：

Mock.mock("/user/list", "post", function (options) {
  /* 当每页数据量以及当前页发生改变时,才进行重新分页 */
  /* 前台在一次请求只需要返回给后台一个页面的数据而已 */
  /* 所以我们应该思考如何得到返回给后台每页的数据的begin、end索引在总数据中所处的位置 */
  let data = result.list;
  let paramJsonStr = options.body;
  let jsonObj = JSON.parse(paramJsonStr);
  /* 获取当前页 */
  let currentPage = jsonObj.currentPage;
  /* 每页条数 */
  let pageSize = jsonObj.pageSize;
  /* 前面得到的这些变量都是为了获取当前页面数据的begin和end索引而准备 */
  let begin = (currentPage - 1) * pageSize;
  let end = currentPage * pageSize;
  return {
    /* 用于呈现数据 */
    /* data: data */
    /* 以前是将全部数据返回,现在只返回一个页面的数据就好了 */
    data: data.slice(begin, end),
    /* 拿到数据的总长度,便于分表 */
    total: data.length
  };
});

所以前台在向后台发送请求的时候，应该携带：

  /* 获取当前页 */
  let currentPage = jsonObj.currentPage;
  /* 每页条数 */
  let pageSize = jsonObj.pageSize;

    methods: {
      listData() {
        let parm = {"currentPage": this.currentPage, "pageSize": this.pageSize};
        this.$http.post("/user/list", parm).then(res => {
         ...
        });
      },
    },
    mounted() {
      this.listData();
    }

同时前台在拿到后台返回的数据后应该解析其中的总数据和总分页：

        this.$http.post("/user/list", parm).then(res => {
          /* 这种东西我们一般将res打印出来找到我们需要的属性来填充就好了 */
          this.tableData = res.data.data;
          this.totalPage = res.data.total;
          this.loading = false;
        });

同时，前台这三个地方触发的函数应该修改当前的pageSize和CurrentPage，然后重新分页以及刷新页面

      handleSizeChange(val) {
        /* 当每页行数发生改变时,重新分页以及刷新页面 */
        this.pageSize = val;
        this.listData();
      },
      handleCurrentChange(val) {
        /* 当当前页发生变化时,重新分页以及刷新页面 */
        this.currentPage = val;
        this.listData();
      }