英文:
React Material-UI labelDisplayedRows on TablePagination
问题
labelDisplayedRows 是一个函数，它的参数 from 和 to 是在组件内部自动传递的，不需要手动定义。你可以直接使用这个函数，无需关心参数的来源。在你的代码中，labelDisplayedRows 函数会接收自动传递的 from、to 和 count 参数，用于生成显示在页面上的文本。
英文:
I have this component for TablePagination:
<TablePagination
rowsPerPageOptions={[5, 10, 25, 50]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
style={{width:'10px'}}
labelRowsPerPage={'Filas por página'}
labelDisplayedRows={ (from, to, count=rows.length) => (`${from}-${to === -1 ? count : to} de ${count}`)
}
/>
According to https://material-ui.com/es/api/table-pagination/
labelDisplayedRows is a func but I don't understand where are defined those vars from, and to
I get: [object Object]-undefined de 11 in the render
答案1
得分: 2
worked for me:
labelDisplayedRows={(page) =>
`${page.from}-${page.to === -1 ? page.count : page.to} 从 ${page.count} 中`
}
also you can use components here, like this:
function defaultLabelDisplayedRows({ from }) {
return (<div>{from}</div>)
}
and then in your pagination component it should be:
labelDisplayedRows={(page) => defaultLabelDisplayedRows(page)}
英文:
worked for me:
labelDisplayedRows={(page) =>
`${page.from}-${page.to === -1 ? page.count : page.to} از ${
page.count
}`
}
also you can use components here, like this:
function defaultLabelDisplayedRows({ from }) {
return (<div>{from}</div>)
}
and then in your pagination component it should be:
labelDisplayedRows={(page) => defaultLabelDisplayedRows(page)}
答案2
得分: 1
我从中得到了：
labelDisplayedRows={(from=page) => (`${from.from}-${from.to === -1 ? from.count : from.to} of ${from.count}`})
英文:
Well, I got it from:
labelDisplayedRows={ (from=page) => (`${from.from}-${from.to === -1 ? from.count : from.to} de ${from.count}`})
答案3
得分: 0
labelDisplayedRows={(from = page) => ${from.from}-${from.to === -1 ? from.count : from.to} de ${from.count}}
英文:
@pmiranda it works perfect but there is an error with some curly brace and parenthesis.
It should be:
labelDisplayedRows={(from = page) => ${from.from}-${from.to === -1 ? from.count : from.to} de ${from.count}}
答案4
得分: 0
只返回翻译好的代码部分：
const defaultLabelDisplayedRows: React.FC<LabelDisplayedRowsArgs> = (props): React.ReactElement<any, any> => {
return (
<>
<p>
<b> Mostrando itens {" "}
<span style={{ color: "#FFB03A" }}>
{props.from > 0 && props.from < 10 ? `0${props.from}-0${props.to}` : `${props.from}-${props.to}`}
</span>
</b>
<p style={{ padding: 0, margin: 0 }}>total de {props.count} itens</p>
</p>
</>
);
}
...
<TablePagination
count={props.count}
page={props.page}
rowsPerPage={props.rowsPerPage}
labelDisplayedRows={({ from, to, count, page }) => {
return defaultLabelDisplayedRows({ from, to, count, page });
}}
/>
请注意，翻译的代码保留了原始HTML实体（如<和>）。
英文:
work for me
const defaultLabelDisplayedRows: React.FC<LabelDisplayedRowsArgs> = (props): React.ReactElement<any, any> => {
return(
<>
<p>
<b> Mostrando itens {" "}
<span style={{color:"#FFB03A"}}>
{ props.from > 0 && props.from < 10 ? `0${props.from}-0${props.to}` : `${props.from}-${props.to}`}
</span>
</b>
<p style={{padding: 0, margin: 0}}>total de {props.count} itens</p>
</p>
</>
)
}
<TablePagination
count={props.count}
page={props.page}
rowsPerPage={props.rowsPerPage}
labelDisplayedRows={ ({ from, to, count, page }) => {
return defaultLabelDisplayedRows({from, to, count, page})
}}
results
答案5
得分: -1
Pagination: (props) => (
<TablePagination
{...props}
labelDisplayedRows={({from, to, count}) => <>{${from}-${to} ${t('dataGrid:rowsOf')} ${count}}</>}
/>
)
英文:
Pagination: (props) => (
<TablePagination
{...props}
labelDisplayedRows={({from, to, count}) => <>{`${from}-${to} ${t('dataGrid:rowsOf')} ${count}`}</>}
/>
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论