vxe-table 分页后序号连续

shayloyuki / 2023-07-26 / 原文

需求

使用 vxe-table 分页后，序号连续。比如每页显示 10 条数据，点击第 2 页，序号从 11 起算。

问题

依照官网 vxe-table-序号修改后，出现两个问题：

分页后序号还是不连续；
点击第 2 页，虽然显示的是第 2 页的数据，但是分页区域的当前页还是 1。

methods: {
    /* 自定义序号显示 */
    seqMethod({ rowIndex }) {
      return (
        (this.queryParams.pageNum - 1) * this.queryParams.pageSize + rowIndex + 1
      );
    },
}

解决

猜想

预估是 pageNum 有问题。

经过排查，发现：点击第 2 页后，queryParams.pageNum 会从 2 变为 1。而 data 中 pageNum 的初始值也是 1。

因此猜想：该组件进行了重新加载。

为了验证这个猜想，把 pageNum 初始值改为 2，发现不会出现上述问题。说明猜想正确。

原因分析

进一步分析：为什么组件会重新加载？

通过如下的代码梳理，A -> B -> C 这三个组件，C组件是 Pagination，B组件是C组件的parent组件，A组件是B组件的parent组件。

由于 :page.sync="queryParams.pageNum"中的 .sync 修饰符，导致C组件的 page 改变，会引起B组件的 queryParams.pageNum 同步改变。；
pageNum 切换，触发C组件的 handleCurrentChange 事件，

进一步触发B组件的 reloadData 事件，

进一步触发A组件的 reloadData 事件。

A组件中：会继续触发 loadData 事件 -> 清空 dataLibVersion 并执行loadStanOps 事件。

这会导致 dataLibVersion 改变（有值 -> 清空 -> 有值）。而 dataLibVersion 清空会导致 dataList 清空，

而 dataList 是B组件的源数据，即 dataList 的改变会导致B组件重新加载，就会使得B组件的 queryParams.pageNum 重置为初始值 1。