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

逃离我推掉我的手 2023-10-06 08:01 4阅读 0赞

#### 文章目录 ####

*  实现思路
 *  组件代码
 *  系列文章

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

## 实现思路 ##

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

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

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

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

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

**组件功能：**

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

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

## 组件代码 ##

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

## 系列文章 ##

*  [分页表格组件][element-ui_]
 *  [动态列分页表格组件（动态控制表格列的显隐）][Link 3]
 *  [后端分页表格组件][Link 4]
 *  [终极分页表格组件（前/后端分页、动态列）][Link 5]

--------------------

end

[element-ui_]: https://blog.csdn.net/qq_31772441/article/details/105899043
[Link 1]: https://blog.csdn.net/qq_31772441/article/details/105914557
[Link 2]: https://gitee.com/markix/frontend-demo/tree/master/vue-components
[Link 3]: https://blog.csdn.net/qq_31772441/article/details/105901908
[Link 4]: https://blog.csdn.net/qq_31772441/article/details/105916370
[Link 5]: https://blog.csdn.net/qq_31772441/article/details/105918711