如何在MUI Table Pagination中自定义rowsPerPageOptions文本

核心实现 #

TablePagination的rowsPerPageOptions属性原生支持对象结构配置，不需要额外覆写内部Select组件或者自定义渲染逻辑，很多人查阅文档时只注意到数字数组的传参格式，忽略了对象类型的配置能力。
你只需要把原来传入的纯数字数组，替换为{value: 实际分页值, label: 显示文本}结构的对象数组即可，选中态和下拉选项都会自动使用你配置的label文本。

代码示例 #

保留你原有组件的其他所有配置，仅修改rowsPerPageOptions属性传值：

<TablePagination
  count={total}
  page={page}
  onPageChange={handlePageChange}
  rowsPerPage={rowsPerPage}
  onRowsPerPageChange={handleRowsPerPageChange}
  // 替换原来的[10,20,30]配置
  rowsPerPageOptions={[
    { value: 10, label: '10条/页' },
    { value: 20, label: '20条/页' },
    { value: 30, label: '30条/页' },
    // 如需"全部"选项可直接添加
    // { value: -1, label: '全部' }
  ]}
/>

注意事项 #

• value字段必须传入数字类型，不要传字符串，否则会导致分页总数、页码计算逻辑异常
• 原有onRowsPerPageChange事件的回调逻辑不需要修改，事件参数里拿到的仍然是对应的数字类型的分页条数，不会影响现有业务逻辑
• 该写法兼容MUI v5、v6版本，如果你还在使用v4版本，需要配合labelDisplayedRows属性自定义选中态文本，下拉选项仍需要用数字数组+自定义Select渲染的方式实现

效果参考 #

• 默认未自定义效果：
  
• 目标实现效果：
  
• API文档对应说明（多数用户容易遗漏该属性的对象类型定义）：
  
• 原有代码参考：
  
  

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