如何向MUI DataGrid中的每一行添加序列号？
如何向MUI DataGrid中的每一行添加序列号？
提问于 2022-04-11 03:12:32
首先，从server.And请求一些数据，然后我想在数据值中添加一些data.There是没有ID的，但是表单需要显示序列号。
const columns: GridColDef[] = [
{
field: 'id' ,
headerName: 'number',
filterable: false,
renderCell:(index:any) => `${index + 1}`
},
{ field: 'code' , headerName: ' code' },
{ field: 'type' , headerName: ' type' },
]<DataGrid rows={row} columns={columns} />但是索引是Nan.How，当我添加新数据时，我是否在表中的每一行中生成一个序列号？
回答 3
Stack Overflow用户
发布于 2022-09-06 10:28:31
我们可以通过使用getRowIndex方法来实现这一点。getRowIndex方法将字段名称作为参数，并返回该字段所属行的索引。所以诀窍是把一个唯一的字段传递给这个方法。
解决您的问题的方法如下所示：
列字段：
{
field: 'id' ,
headerName: 'number',
filterable: false,
renderCell:(index) => index.api.getRowIndex(index.row.code)
}数据网格：
<DataGrid rows={row} columns={columns} getRowId= {(row) => row.code}/>在上面的例子中，我认为代码是一个唯一的字段。如果很难有一个唯一的字段，则可以生成一个包含代码、类型等组合的字段。
在这种情况下，您的解决方案如下所示：
列字段：
{
field: 'id' ,
headerName: 'number',
filterable: false,
renderCell:(index) => index.api.getRowIndex(index.row.code + '_' + index.row.type)
}数据网格：
<DataGrid rows={row} columns={columns} getRowId= {(row) => row.code + '_' + row.type}/>Stack Overflow用户
发布于 2022-09-27 11:08:57
~使用MUIx v5.17.4。(2022年)
如果我正确理解了您的问题，您希望有一张如下所示的表格：
您可以通过使用row组件的<DataGrid />支柱来实现这一点，请参见下面的示例：
const columns = [ {field: 'No.'}, {field: 'Header 1'}, {field: 'Header 2'} ]
const rows = users.map((user, i)=> ({ 'No.': i + 1, ...user }))其中users是来自某个后端的列表(数组)。
更新：
使用此方法，如果更改项目的排序，则为“No”。字段将不总是按顺序计算:即，1,2,3,4或4,3,2,1。相反，如果您更改排序或筛选选项，则会有类似于4、2、1、3的序列。
Stack Overflow用户
发布于 2022-04-13 04:58:53
您可以使用renderCell方法，它的支柱有一个id键，它对每一行都是唯一的。看起来会是这样的。
renderCell: (params) => {
return (<h1>
{'serial Number:', params.id}
</h1>);
}您还可以使用npm包纳米线为每一行生成唯一的id。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71822341
复制相关文章
相似问题
腾讯云开发者
