Question

我正在尝试在具有常量标头的表中具有可扩展列表项。为此，我使用了React material ui 1.0.0-beta.34中的Table和ExpansionPanel组件。但是，桌子不是很好。所有正文数据都在一个标题TableCell下。这是我的代码。

表组件：

    import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table';
import Paper from 'material-ui/Paper';
import { styles } from './styles';
import ExpandableTableRow from 'client/components/expandable-table-row';

class GenericTable extends Component {
    render() {
        const { classes, items, headItems } = this.props;
        return (
            <Paper className={classes.paper}>
            <Table>
                <TableHead>
                    <TableRow>
                         {headItems.map((n, i) => {
                            return <TableCell className={classes.column} key={i}>{n}</TableCell>
                        }) }
                    </TableRow>
                </TableHead>
                <TableBody>
                    {
                        !items.length &&
                        <TableRow>
                            <TableCell colSpan={12} className={classes.center}>
                                <p>There is no data to display</p>
                            </TableCell>
                        </TableRow>
                    }
                    {items.map((item, i) => {
                        return (
                            <ExpandableTableRow key={i} item={item}/>
                        );
                    })}

                </TableBody>
            </Table>
            </Paper>
        );
    }
}

GenericTable.propTypes = {
    items: PropTypes.array.isRequired,
    headItems: PropTypes.array.isRequired,
};

export default withStyles(styles)(GenericTable);

ExpandableTableRow组件：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import ExpansionPanel, {
  ExpansionPanelSummary,
  ExpansionPanelDetails,
} from 'material-ui/ExpansionPanel';
import Typography from 'material-ui/Typography';
import { styles } from './styles';
import { TableRow, TableCell } from 'material-ui/Table';

class ExpandableTableRow extends React.Component {

    render() {
        const { classes, item } = this.props;
        return (
            <div className={classes.root}>
                <ExpansionPanel>                    
                    <ExpansionPanelSummary>
                        <TableRow>
                            <TableCell><Typography>{item.a}</Typography></TableCell>
                            <TableCell><Typography>{item.b}</Typography></TableCell>
                            <TableCell><Typography>{item.c}</Typography></TableCell>
                            <TableCell><Typography>{item.d}</Typography></TableCell>
                            <TableCell><Typography>{item.e}</Typography></TableCell>
                            <TableCell><Typography>{item.f}</Typography></TableCell>
                        </TableRow>
                    </ExpansionPanelSummary>

                <ExpansionPanelDetails>
                    <Typography>
                        Expansion panel expanded
                    </Typography>
                </ExpansionPanelDetails>
                </ExpansionPanel>
            </div>
        );
    }
}

ExpandableTableRow.propTypes = {

};

export default withStyles(styles)(ExpandableTableRow);

我正在努力使这项工作。任何帮助表示赞赏。

Answer 1

这是我较早解决此问题的方式。我在Collapse内包装了一个TableCell过渡，并将其设置为hidden和in道具。示例：

 <TableCell padding={'none'} colSpan={12}>
    <Collapse hidden={!open} in={open}>
       {
         <ItemComponent/>
       }
    </Collapse>
 </TableCell>

Answer 2

我也正在研究同样的问题。显然，实质性UI具有关于可扩展表行的问题线程。这个link可能会对您有所帮助。：）

React材料中的可扩展表ui

2 个答案: