基于element-ui的 后端分页表格组件

此案例基于 基于element-ui的 动态列分页表格组件（动态控制表格列的显隐），增加了后端分页的功能。

实现思路

  后端分页就是前端传递页码和每页条数两个参数到后台进行查询，返回的数据仅仅包含当前页的数据。（不同于前端分页，一次性查询所有数据）所以，当页码和每页条数变化时，都需要触发后端分页查询的方法，然后再处理分页数据。

  后端分页查询方法是在父组件（组件使用者）定义，所以组件需要通过 $emit 来触发该方法。
当前页码、每页条数的信息是封装在组件中的，可以通过 $emit 传递给父组件，所以，父组件的后端分页查询方法需要有两个参数接收。

整体流程：
  组件 -> $emit -> 父组件分页查询方法 -> 发送异步请求到后台 -> 分页数据 -> 组件（处理数据，渲染表格）

  后端分页查询方法一般为异步请求，$emit 只是触发该请求，可能分页数据还没返回 $emit 就已经执行结束了，那分页数据怎么送到组件处理呢？
两种方式：

1. 将分页数据的处理逻辑以方法参数的形式通过 $emit 传递给父组件，由父组件触发。（此形式）
2. 将分页数据的处理逻辑封装成一个方法，父组件通过 $refs 调用组件该方法。（本案例使用此方式）

组件功能：

1. 继承 动态列分页表格组件 的所有功能
2. 后端分页功能开关
3. 支持后端分页

效果图
和前端分页效果图一致，不贴了。

组件代码

相关的代码托管在码云，必要的注释都注明在代码中。传送门走你：码云地址
对应的文件目录为 src/views/PageTable/backendPaging-v2/，PageTable.vue 为组件代码，backendPaging.vue为使用案例。

系列文章

• 分页表格组件
• 动态列分页表格组件（动态控制表格列的显隐）
• 后端分页表格组件
• 终极分页表格组件（前/后端分页、动态列）

---

end