基于element-ui的 终极分页表格组件(前/后端分页、动态列)

文章目录

  • 系列文章
  • 可分页表格组件
    • 功能列表
  • 使用案例
  • 相关代码
  • 在线演示地址

其实,这篇是总结帖。

系列文章

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

可分页表格组件

其实在第三篇文章(后端分页表格组件)的组件就已经是一个基本完善的分页表格组件了(自我感觉良好)。
下面列举下其功能:

功能列表

  1. 兼容 原有属性设置
  2. 分页功能开关
  3. 支持前端分页
  4. 支持分页参数的设置
  5. 动态列功能开关
  6. 支持动态列设置
  7. 支持初始隐藏列的设置
  8. 支持不可隐藏列的设置
  9. 后端分页功能开关
  10. 支持后端分页

相关功能点的设计思路在起前几篇文章都有提及,这里就不赘述了。

使用案例

前几篇博文有列举几个案例,所有预览效果详见 在线演示地址。这里举几个能实现的例子:

  1. 不分页
  2. 不分页 + 动态列
  3. 前端分页
  4. 前端分页 + 动态列
  5. 后端分页
  6. 后端分页 + 动态列

相关代码

代码太多,就不直接贴了。
相关代码都上传在了 codesandbox 上,最牛皮的是它支持在线预览,激动到流泪。
codesandbox在线代码地址

codesandbox貌似不太稳定,有时候访问不了或者加载出错。实在不行拉代码本地跑吧。
代码上传在码云,走你。码云地址

在线演示地址

在线演示地址


end

你可能感兴趣的:(前端)