antd - 帶有分頁控件的螞蟻設計表支持小部件來選擇每頁的行嗎？

Question

Ant Design Table 控制器是否采用 Pagination 組件，而不是一個簡單的屬性對象。 我需要添加一個切換器，以在每頁的行之間切換。

目前它是在 Pagination 組件中實現的。

Answer 1

如果您只需要能夠選擇每頁的行數，那么以下代碼應該適合您：

<Table
    dataSource={...}
    pagination={{ defaultPageSize: 10, showSizeChanger: true, pageSizeOptions: ['10', '20', '30']}}
>

基本上將Pagination 道具包裝到一個分頁對象中，並將其傳遞到您的 Table 組件中。

如果您需要更多自定義，您可能需要考慮關閉默認的 Table 分頁並連接您的自定義分頁組件。 示例代碼：

Answer 2

上面的例子是實現自定義分頁的直接方法。 但是，我確實注意到了getData函數的一個小問題。 如果您使用該函數，該表永遠不會呈現數據數組中的最后一項。 相反，您可能想將其更改為類似

const getData = (current, pageSize) => {
return data.slice((current - 1) * pageSize, current * pageSize);
}