Vue2 Element Pagination组件 每页数据量不同的解决方案

---

前言

Element pagination, 每页数据量不同的解决方案, 单页数据不足会空出空间.
我知道Pagination组件有page-count属性, 但是如果需要支持pageSize的更改, 就只能给出pageSize和total让组件自己计算.

我在项目中使用到了被二次封装的el-pagination组件, 同上, 为了能支持pageSize的更改, 组件作者也采用了pageSize+total设置页数的方式, 需要传入总数据量total和单页最大数据量pageSize, 虽然我是围绕这个组件说的, 但是不用担心, 这个组件封装的很浅, 而且也通过同el-pagination的pageSize加total方法来分页.

对于全部数据无差别的平均分页, 这个方案是比较理想的, 但是举例pageSize为10, 第一页只需要展示3条记录, 第二页需要6条, 在前端分页的情况下就不太好办了.

首先pageSize没法给, 固定值给上去就变成数据平均分页. pageSize也不能实时计算, pageSize一旦不固定, Element计算的总页码也是随着翻页不断变化, 这样页码的意义又在何处, 而且容易在末页产生空页情况.

---

一、情景

1.前端情况

这种情况后端分页会好办一些, 额, 采用前端分页, 切页不做请求.
Element多选表格, 选中多项后提交, 前端拿所有受选项去后端查询, 每个受选项查询到不定数量结果返回给前端, 后端一次性返回分隔好的所有受选项查询结果, 前端每页仅展示一个受选项的所有查询结果.

所以, 每页数据量不固定, 也不允许均分数据展示.

---

2.后端数据

data[i].ezglist数组为单页数据, 其内部一个对象为一条记录.
data[i].ezglist内部记录数量不定.

"data": [
  {
   
    "ezglist": [
      {
   
        "xxx": "xxx",
        "xxx": "xxx",
        "xxx": "xxx",
        "xxx": "xxx"
      }
    ]
  },
  {
   
    "ezglist": [
      {
   
        "xxx": "xxx",
        "xxx": "xxx",
        "xxx": "xxx",
        "xxx": "xxx"
      },
      {
   
        "xxx": "xxx",
        "xxx": "xxx",
        "xxx": "xxx",
        "xxx": "xxx"
      }
    ]
  },
  ...
]

这个就是第二章的res, 虽然不会这么短.

---

二、解决方案

这个二次封装的组件已经在多处使用, 我绝对不该乱动, 最好是从我的数据下手, 然后可以在渲染的时候做一点小手脚, 基本原理是用空数据占据单页内的空缺位, 防止分页组件平均分数据的时候下一页的数据压上来, 不过你放心也不会展示空行的.
这里用到了Vuex, 额, 那些指令都是SET开头, 你完全可以简单理解, 向Vuex中的某某set一个新的值.

---

1.处理数据

各个步骤的方法我已经全部抽离, 那么这个函数或许可以作为一个流程图?

async initTableData({
     commit, state, dispatch }, queryParams) {
    // 初始化报表数据
  commit('SET_TABLE_LOADING', true); // 启动表格加载
  
  commit('SET_PAGE_SIZE', 9); // 固定pageSize
  
  const res = await EBEC030IBillPrint(queryParams); // 请求所有页面的、全部的数据
  commit('SET_PAGE_TOTAL', res.length); // 初始化总页数

  await dispatch('stabilizeTableAllData', res); // 生成稳定化数据
  await dispatch('getDataTotal',