javascript - React - Material UI 表在每一行中包含一个下拉列表
问题描述
所以我有这个表我已经从数组映射中渲染了它的行,如下所示
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Object Name</TableCell>
<TableCell align="center">Object Field and Values</TableCell>
</TableRow>
</TableHead>
<TableBody>
{union &&
unionArray.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
{Object.keys(row).map((key) =>
key === "name" ? (
""
) : (
<TableCell align="center">
{/*insert dropdown select*/}
<FormControl
variant="outlined"
className={classes.formControl}
>
<InputLabel htmlFor="outlined-age-native-simple">
Values
</InputLabel>
<Select
native
label="Value"
>
<option aria-label="None" value="" />
<option>{key}:{row[key]}</option>
</Select>
</FormControl>
</TableCell>
)
)}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
解决方案
您可以修改从 api 获得的数组并执行以下操作:
let modifiedUnion = unionArray.map(el=>{
let tempObj={}
let values=[]
Object.keys(el).map(key=>
if(key!=="name"){
tempObj.values = values.push({[key]:el[key]})
}else{
tempObj.name = el.name
}
return tempObj
})
然后像这样写这部分:
{modifiedUnion.map((row) => (
<TableRow key={row.name}>
<TableCell align="center">
{row.name}
</TableCell>
<TableCell align="center">
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel htmlFor="outlined-age-native-simple">
Values
</InputLabel>
<Select native label="Value">
<option aria-label="None" value="" />
{row.values.map((key) =>
<option>{Object.keys(key)[0]}:{Object.values(key)[0]}</option>
)}
</Select>
</FormControl>
</TableCell>
</TableRow>
))}
推荐阅读
- google-apps-script - 遍历 Google Sheet 中的单元格并删除文本的子字符串
- c++ - C++ 通过 1d 向量的函数初始化 2d 向量
- python - Python:需要在数据框中找到每个试验的开始
- r - Windows 看不到在 RStudio 之外安装的 tidyverse
- authentication - 如何从 Google 服务器获取经过身份验证的 JWT 令牌以调用 Google Ads API
- java - 如何检测 JTable 之外的鼠标位置?
- c# - 如何使用 Azure 客户端库 v12 将整个容器从一个 Azure Blob 服务复制到另一个
- javascript - 使用 vanilla JS 而不是 JQuery $ 选择器按 id 选择 div 以应用 Raphaeljs 方法
- python - python上os.system中的花括号
- docker-compose - 由于缺少 postgres 映像或构建,无法运行 reportportal docker-compose