一旦选中一个,在所有TableRow元素上显示复选框
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一旦选中一个,在所有TableRow元素上显示复选框相关的知识,希望对你有一定的参考价值。
我有一个材质用户界面表,我正在向其中添加多选功能。我的要求如下。
Checkbox
es最初都是隐藏的。 -完成- 当悬停在一行上时,其复选框出现。 DONE
- 一旦检查了一个
Checkbox
,然后其他行上的所有Checkbox
元素将变得始终可见。
我已经完成了前两个要求,但我正在为最后一个要求而苦苦挣扎。
一旦选中其中任何一个复选框,如何显示所有复选框(通过更改opacity
?
这是到目前为止我要去的地方:
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Checkbox from "@material-ui/core/Checkbox";
const useStyles = makeStyles({
rowIconStyle: {
minWidth: 50,
minHeight: 50
},
tableRowStyle: {
cursor: "pointer",
"&:hover": {
backgroundColor: "darkGrey"
}
},
rowSelectionCheckboxStyle: {
//opacity: "calc(var(--oneRowSelected))",
opacity: 0,
"$tableRowStyle:hover &": {
opacity: 1
}
}
});
export default function MyTableComponent(props) {
const styles = useStyles();
const DEFAULT_TABLE_ROW_ICON_COLOR = "grey";
return (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>
<Checkbox className={styles.rowSelectionCheckboxStyle} />
</TableCell>
<TableCell>Icon</TableCell>
<TableCell>Name</TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.tableRowsData.map(row => {
const RowIcon =
row.icon && row.icon.iconElement
? row.icon.iconElement
: () => <div />;
let iconElement = (
<RowIcon
className={styles.rowIconStyle}
style={{
color:
row.icon && row.icon.color
? row.icon.color
: DEFAULT_TABLE_ROW_ICON_COLOR
}}
/>
);
return (
<TableRow key={row.name} className={styles.tableRowStyle}>
<TableCell>
<Checkbox className={styles.rowSelectionCheckboxStyle} />
</TableCell>
<TableCell>{iconElement}</TableCell>
<TableCell>{row.projectName}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
}
MyTableComponent.propTypes = {
tableRowsData: PropTypes.array
};
答案
以样式CSS形式输入
.MuiCheckbox-colorSecondary.Mui-checked {
opacity: 1 ;
}
以上是关于一旦选中一个,在所有TableRow元素上显示复选框的主要内容,如果未能解决你的问题,请参考以下文章
jQuery - 选中/未选中复选框上的动态显示和隐藏按钮,反之亦然[关闭]