如何在 mui 表分页中添加字符串文本 rowsPerPageOptions？答案

【问题标题】：how to add string text rowsPerPageOptions in mui Table Pagination?如何在 mui 表分页中添加字符串文本 rowsPerPageOptions？
【发布时间】：2022-11-10 21:20:19
【问题描述】：

任何人都可以帮助我吗？请检查下图，我想将 10 页更改为 10 页。每当我选择 10 20 或 30 时，我希望每页 20 个，每页 30 个。

下图是我真正想要的示例。

伙计们，我已经阅读了整个表格分页 api 文档，但我无法理解。

请立即检查代码快照。

【问题讨论】：

任何人都可以帮助我吗？

标签： reactjs material-ui

【解决方案1】：

基于docs，rowsPerPageOptions可以处理对象数组

rowsPerPageOptions Array<number | { label: string, value: number }>

意味着你可以像这样使用：

...
count={10}
rowsPerPageOptions={[
   { label: "10 per page", value: 10 },
   { label: "20 per page", value: 20 },
]}
rowsPerPage={rowsPerPage}
...

【讨论】：

哇谢谢我的朋友。它的工作就像魅力。
这正是我想做的，但我不能让它工作，你是怎么做到的？你能发布你的解决方案吗？（也许有点堆叠闪电战）
这可能是也可能不是您的问题，但在@mui 的较新版本中，该值似乎必须是一个字符串，例如，这会起作用：{ label: "10", value: 10 }，但这会不是：{标签：20，值：20}。

【解决方案2】：

我想在选项上添加 Id 以进行测试，所以我这样做了，效果很好。

<TablePagination>
  ...
  rowsPerPageOptions={[
    { label: <span id="option-1">10</span>, value: 10 },
    { label: <span id="option-2">20</span>, value: 20 },
  ]}

但它给我一个警告：“ 提供给 ForwardRef(TablePagination) 的无效道具 rowsPerPageOptions[0]，应为 [数字，字符串] 类型之一。”

【讨论】：