我正在使用MUI数据网格,第一列值(资产描述)来自一个数组,标题Meember 1、Member 2和...也来自一个数组,我需要在每个字段中输入特定值,以便使用react-redux将记录插入到DB中。我需要为与下面粘贴的图像中显示的成员和资产关联的所有单元格使用不同的名称。x1c 0d1x
现在,我的问题是如何根据列和行为每个单元格生成动态名称,如上图所示?谢谢您的帮助。
下面是我的列和行代码。
const membersName = ["Member1", "Member2", "Member3"];
const assetTypes = [
{ id: 1, assetTitle: "Cash", assetType: "cash" },
{ id: 2, assetTitle: "Checking Accounts", assetType: "checkAccount" },
{ id: 3, assetTitle: "Other", assetType: "other" },
];
//货币值的列
const assetFileds = membersName.map((items, index) => {
const name = "cash" + index;
const newObject = {
field: "member_" + index,
headerName: items,
flex: 1.0,
disableClickEventBubbling: true,
sortable: false,
disableColumnMenu: true,
renderCell: (params) => (
<>
<CurrencyValue
fullWidth={false}
// defaultValue={params.row.description}
variant="standard"
name={name}
value={values.name}
onChange={handleChange}
/>
<BackupIcon
onClick={doOpenModal}
visibility={!values.name ? "hidden" : "visible"}
/>
</>
),
};
return newObject;
});
const columnForAssetTypes = {
field: "assetTitle",
headerName: "Asset Description",
flex: 1.0,
disableClickEventBubbling: true,
sortable: false,
disableColumnMenu: true,
};
//render final columns
const renderColumns = (array, index, newItem) => {
return [...array.slice(0, index), newItem, ...array.slice(index)];
};
const finalColumns = renderColumns(assetFileds, 0, columnForAssetTypes);
//set columns and rows
//const columns = columnsOld;
const columns = finalColumns;
const rows = assetTypes;
return (
<Container>
<div className="about-yourself">
<Grid container spacing={3}>
<Grid item xs={12}>
<div className="about-header d-flex">
<span className="icon-w-bg-l">
<img src={ChildCareProviderImage} alt="App user" />
</span>
<h3> Asset information</h3>
</div>
<div style={{ height: 400, width: "100%" }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
//disableSelectionOnClick
/>
</div>
</Grid>
</Grid>
</div>
</Container>
);
1条答案
按热度按时间zpf6vheq1#
我不熟悉
mui-datagrid
,但如果我理解得好的话,这个想法是用for loop
控制逻辑我希望你明白