我正在使用 Material UI 开发一个 React 元素，并且在 DataGrid 组件(版本 4.0.0-alpha.23)方面遇到了一个相当烦人的问题。
我将一个 DataGrid 表插入到 Box 组件中(设置高度为 70vh)。并非所有行都显示在给定页面上，并且呈现的行数随着窗口高度的变化而变化。例如，有 10 行。页面加载时，默认每页行数为 5，并且表格在第一页上正确显示 5 行(但表格的高度较大，因此最后一行后有一个尾随“空白”内容)。如果我将每页行数更改为 10，则仅显示 8 行，并且没有滚动条来显示其余行。如果我缩小浏览器窗口，显示的行数会发生变化并出现滚动条，无论如何仍然不可能看到所有行。因此，问题不仅在于缺少滚动条，还在于每页显示的实际行数与 pageSize 参数值不一致。
我想指出的是，我从未使用过 React 或 Material UI，而且我对前端开发总体来说是新手，所以也许这是一个愚蠢的问题，但有一个简单的解决方案，所以请原谅我可能愚蠢的想法问题。不管怎样，我希望你能帮助我。
这是一个代码示例:
<Box className={classes.grid}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5, 10, 15]}
headerHeight={42}
/>
</Box>
网格类如下:
grid: {
padding: theme.spacing(0, 0, 2),
width: '100%',
height: '70vh',
'& .MuiDataGrid-columnsContainer': { backgroundColor: '#000', color: '#fff' },
'& .MuiDataGrid-row': {
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
},
'& .MuiDataGrid-columnSeparator': { display: 'none' },
'& .MuiIconButton-root': { color: '#fff !important' },
'& .MuiTablePagination-actions > .MuiIconButton-root': { color: '#000 !important' },
'& .MuiDataGrid-root .MuiDataGrid-menuIcon': { visibility: "visible" },
'& .MuiDataGrid-row': { maxHeight: "none !important", },
'& .MuiDataGrid-root .MuiDataGrid-cellWithRenderer[data-field="ItemsId"]': { lineHeight: '20px !important' },
'& .MuiDataGrid-cell.MuiDataGrid-cellWithRenderer.MuiDataGrid-cellLeft': { maxHeight:
"none !important" },
'& .MuiDataGrid-cell.MuiDataGrid-cellLeft': { maxHeight: 'none !important', display:
'flex', alignItems: 'center' }
},
最佳答案
根据MUI documentation ，应该使用 autoPageSize 属性将行数(又名 pageSize)缩放到网格容器的高度。因此，我假设使用 pageSize 和 rowsPerPageOptions 属性与使用 autoPageSize 不兼容。您可能想要使用 pageSize 显示每页的特定行数，或者使用以下命令显示适合网格样式的行数(即 height: 70vh;) autoPageSize。
关于html - 并非所有行都显示在 Material-UI DataGrid 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70205215/