作者:亚艾元技术部
这是我最初的配置:
<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)); };
完美解决