React material ui分页每页显示行数可配置

作者：亚艾元技术部

这是我最初的配置：

<TablePagination
        
  colSpan={3}
  count={count}
  rowsPerPage={rowsPerPage}
  page={page}
 
  SelectProps={{
       native: true,
  }}
  onChangePage={this.handleChangePage}
  onChangeRowsPerPage={this.handleChangeRowsPerPage}
  ActionsComponent={TablePaginationActionsWrapped}
/>

默认不支持选择每页显示行数。后来做了改进：

<TablePagination
  rowsPerPageOptions={[10, 20, 30,50,100]}
  colSpan={3}
  count={count}
  rowsPerPage={rowsPerPage}
  page={page}
  labelRowsPerPage={"每页行数"}
  SelectProps={{
       //label: '每页行数',
       inputProps: { 'aria-label': "每页行数" },
       native: true,
  }}
  onChangePage={this.handleChangePage}
  onChangeRowsPerPage={this.handleChangeRowsPerPage}
  ActionsComponent={TablePaginationActionsWrapped}
/>

中间遇到一个问题，不知道怎么设置这个选择元素前面的label文字。默认是英文 Rows per page。

查看文档未果，自己尝试了几个属性还是不行，后来查看了TablePagination组件的源代码，发现设置一下labelRowsPerPage属性即可。

同时修改了这个变更的回调：

  handleChangeRowsPerPage = event => {
    this.setState({
         rowsPerPage: event.target.value,
      page:0, //重置页码    
       }, function(){
       this.fetchData();
    }.bind(this));
  };

完美解决