时间戳

首页 > 解决方案 > 反应引导表不改变 sizePerPageList

reactjs - 反应引导表不改变 sizePerPageList

问题描述

我正在尝试修改我的 react-bootstrap-table2，但是它不符合我传入的选项之一。对于传入表组件的选项，这是我的 return 语句的一部分。到目前为止，这是一个有用的链接

return {
    options: {
      bootstrap4: true,
      bordered: false,
      displayCaret: true,
      striped: true,
      showFilters: true,
      keyName: "key",
      keyField: "key",
      showColumnBorders: false,
      showPagination: true,
      sizePerPageList: [ 5, 10, 20 ],
      defaultSorted: [
        {
          dataField: "name",
          order: "asc"
        }
      ]
    },

我正在明确设置 sizePerPageList 但它不会在 UI 中更改它。它只显示 10、25、30 和 50 而不是 5、10 和 20 的下拉列表。我这样做是不是错误的方式？

以下是我的实现方式：

<SchemaTable
          options={SchemaSettings.options}
          schema={mySchema}
          data={mappedData}
          className="disable-hot-table-cells"
        />

SchemaSettings.options 是检索到的选项列表。

标签： reactjsreact-bootstrap

解决方案

解决方案是我需要将其虹吸到它自己的对象中：

options: {
      bootstrap4: true,
      bordered: false,
      displayCaret: true,
      striped: true,
      showFilters: true,
      keyName: "key",
      keyField: "key",
      showColumnBorders: false,
      showPagination: true,
      defaultSorted: [
        {
          dataField: "name",
          order: "asc"
        }
      ],
      paginationOptions: {
        sizePerPage: 20,
        page: 1,
        alwaysShowAllBtns: true,
        hideSizePerPage: false,
        sizePerPageList: [5,10,20]
      }

推荐阅读