Vue Vben Admin中实现VxeTable分页序号连续增长的技术方案

背景介绍

在Vue Vben Admin项目中使用VxeTable组件时，开发者经常会遇到一个常见的需求：当表格数据分页显示时，希望序号能够连续增长而不是每页都从1开始重新计数。例如第一页显示1-10，第二页显示11-20，以此类推。

问题分析

VxeTable默认情况下，每页的序号都是从1开始重新计数，这在实际业务场景中可能会给用户带来困扰，特别是在需要引用或记录特定行数据时。虽然VxeTable官方文档提供了相关示例，但直接套用可能无法在Vue Vben Admin环境中正常工作。

解决方案

通过深入研究VxeTable的API和Vue Vben Admin的实现方式，我们发现可以通过seqConfig配置项的seqMethod方法来实现序号连续增长的功能。该方法可以访问表格的分页信息，从而计算出正确的连续序号。

seqConfig: {
  seqMethod({ rowIndex }) {
    const {
      pager: { currentPage, pageSize },
    } = gridApi.grid.getProxyInfo()!;
    return (currentPage - 1) * pageSize + rowIndex + 1;
  },
}

实现原理

1. 获取分页信息：通过gridApi.grid.getProxyInfo()方法获取当前表格的分页信息，包括当前页码(currentPage)和每页显示数量(pageSize)。

2. 计算基础值：(currentPage - 1) * pageSize计算出前几页的总行数，作为当前页序号的基础值。

3. 加上当前行索引：rowIndex + 1获取当前行在本页中的位置（从1开始计数）。

4. 合计得出连续序号：将基础值和当前行索引相加，得到最终的连续序号。

注意事项

1. 确保gridApi已经正确初始化并绑定到表格实例。

2. 在TypeScript环境中，需要使用非空断言操作符!来告诉编译器getProxyInfo()的返回值不为null。

3. 此方案适用于服务器端分页和客户端分页两种场景。

4. 如果表格没有启用分页功能，此方法仍然有效，此时currentPage为1，pageSize为总行数。

扩展应用

此技术方案不仅可以用于简单的序号显示，还可以应用于：

1. 需要显示全局唯一标识的场景
2. 数据导出时保持序号连续
3. 与后端交互时保持一致的序号参考

总结

通过合理利用VxeTable提供的API和Vue Vben Admin的封装，我们能够轻松实现表格分页序号连续增长的功能。这种方案不仅代码简洁，而且性能高效，是处理此类需求的理想选择。开发者可以根据实际业务需求，进一步扩展和优化此方案。