Vue2 带纵向合并的原生表格实现切割侧栏分页

---

前言

前端表格分页.
带纵向合并的表格, 到达固定行数强制分页, 截断本页纵向合并, 在下页展示该纵向列的剩余部分, 代码多为前端数据处理, 所以仅提供思路.
这并不难, 你可以直接看第三节.

---

一、目标效果

未分页状态:

红线以上为表头, 这看起来似乎不复杂, 主要问题是需要分页, 而且是以右侧的那种小行为单位, 43行为一页, 而左侧 id colspan并不固定, 没有人知道这次请求的数据会有几个在这一栏.

分页状态:
如果左侧长栏受到分页切割, 那么应该在两页均显示这一栏, 就像这样:

---

二、失败方案

起初的方案先依据id属性对包含所有数据的大数组做切分, 先把分段做出来, 计算每段的小计加入段末, 之后根据段数组长定制每段id的colspan进而得到tag的colspan, 将colspan作为一个特殊的属性(我用的是idColspan)添加给每个段数组的第一个元素, 即加给每段第一行的行数据对象.
之后将标记了段首colspan并增加了段尾小计行的所有分段数据拆解, 重新组合为一个大数组, 分页后直接v-for遍历生成每页, 遍历时v-if, 若该行存在标记了colspan的特殊属性或者标记了小计行的特殊属性, 那么单独使用一种渲染方案:

<tr> <!-- 每段作为一个tr -->