vxe-table 分页后序号连续
需求
使用 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。
解决办法
只要不让A组件的 dataLibVersion
清空即可,为了减少修改A组件代码对其他功能的影响,只需要用 loadByPageType
事件代替 loadData
即可。
参考链接
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/17582763.html
posted on 2023-07-26 16:07 shayloyuki 阅读(1040) 评论(0) 编辑 收藏 举报