Material-UI Table分页场景下如何实现仅选中当前页条目

完全可以实现仅选中当前分页内的条目，核心是将选中逻辑和当前页渲染的数据集绑定，而非全量数据集，具体实现步骤如下：

• 维护基础状态：分别存储全量表格数据、当前页码page、每页展示条数rowsPerPage、选中项id集合selected
• 计算当前页数据集：每次分页参数变化时，基于全量数据切片拿到当前页渲染的所有条目，示例逻辑：

  const currentPageRows = allRows.slice(page * rowsPerPage, (page + 1) * rowsPerPage)
  

• 重写全选逻辑：点击表头全选框时，仅操作当前页条目的选中状态，示例代码：

  const handleSelectAll = (checked) => {
    if (checked) {
      // 仅将当前页所有条目id加入选中集合
      setSelected(currentPageRows.map(item => item.id))
    } else {
      // 清空当前选中
      setSelected([])
    }
  }
  

• 全选状态判断：表头全选框的选中状态仅和当前页条目匹配情况绑定，判断逻辑：

  const isAllSelected = currentPageRows.length > 0 
    && currentPageRows.every(item => selected.includes(item.id))
  

• 分页切换适配：如果不需要跨页保留选中状态，监听分页参数变化事件，切换页码时直接清空选中集合即可；如果需要保留多页选中记录，可按页码为key存储对应页的选中集合，切换页码时读取对应页的选中状态赋值即可。

如果需要实现跨页独立的选中逻辑（不同页的选中状态互不影响），可以将选中状态的存储结构改为按分页索引分组的对象，示例结构：

// key为页码，value为对应页的选中id数组
const [selectedByPage, setSelectedByPage] = useState({})

切换页码时直接读取selectedByPage[page]作为当前页的选中集合即可。

内容的提问来源于stack exchange，提问作者IncognitoUser