数组filter与slice方法搭配使用时分页搜索功能失效问题求助

AI 小北

2026-10-3

问题根本原因

你现有代码的执行逻辑是「先对全量用户做搜索筛选，再对筛选结果做分页切片」，逻辑本身是通顺的，出现异常是因为忽略了搜索关键词变化后，当前页码没有复位到第1页的问题：

举个实际场景示例：假设你当前处于第2页，每页展示10条数据，此时slice的取值范围是10_{20。如果你输入搜索关键词后，符合条件的筛选结果总共只有8条，slice取10}20的区间会返回空数组，自然就会表现为筛选失效。
你观察到第一页筛选正常是因为第一页的slice范围是0~10，只要筛选结果不少于10条就能正常渲染，和slice是否生效无关。移除slice后会返回全量筛选结果，不受当前页码影响，所以功能恢复正常。

修复方案

1. 搜索事件联动复位页码

给搜索输入框添加输入/变化事件监听，只要搜索关键词发生修改，就直接将this.currentPage重置为1，保证每次搜索都从筛选结果的第一页开始展示。

2. 代码结构优化（可选）

可以把筛选逻辑和分页切片逻辑拆分，方便后续取筛选结果的总长度来计算分页总页数，避免出现当前页码超过筛选结果最大页数的问题：

// 新增计算属性：返回全量的筛选后用户列表
filteredUsers() {
  const searchVal = this.search.toLowerCase()
  return this.users.filter((user) =>
    user.firstName.toLowerCase().includes(searchVal) ||
    user.lastName.toLowerCase().includes(searchVal) ||
    user.email.toLowerCase().includes(searchVal)
  )
},
// 原tableData仅负责分页切片
tableData() {
  const start = this.perPage * (this.currentPage - 1)
  const end = start + this.perPage
  return this.filteredUsers.slice(start, end)
},
// 新增计算属性：计算筛选结果对应的总页数，用于分页组件绑定
totalPage() {
  return Math.ceil(this.filteredUsers.length / this.perPage)
}