Question

我正在使用Material-UI构建一个表，该表在添加3行以上后会折叠，但是在打开折叠表时会更改其布局。

[在此处输入图片描述] [1]

创建行

    createRowFrame=(array,num)=>{
            return array.map(frameObject=>{
                return(
                    <MuiThemeProvider theme={theme}>
                        <TableRow key={frameObject.frame.id} style={num===2?{backgroundColor:"#F1D3D3"}:{}}>
                            <TableCell>1</TableCell>
                            <TableCell>{frameObject.frame.name}{frameObject.hipsterFrame !== null && (" / "+frameObject.hipsterFrame.name)}</TableCell>
                            <TableCell><DeleteIcon className={this.props.classes.icon} onClick={()=>{this.props.removeOneFrame(frameObject.frame.id)}}/></TableCell>
                        </TableRow>
                    </MuiThemeProvider>
                )
            })
        }

有条件地创建折叠表

        createTablePart=(frameArray, brand)=>{
            var remainingCredit = this.props.credits[brand+"Credit"] - frameArray.length
            var allowedFrames
            var overFrames
            if(remainingCredit<0){
                allowedFrames = frameArray.slice(0,this.props.credits[brand+"Credit"])
                overFrames = frameArray.slice(this.props.credits[brand+"Credit"], frameArray.length)
            } else {
                allowedFrames=frameArray
                overFrames=[]
            }
            console.log(allowedFrames)
            console.log(overFrames)
            if(frameArray.length>3){
                const {classes, t} = this.props;
                return(
                    <React.Fragment>
                        <MuiThemeProvider theme={theme}>
                            <TableRow onClick={()=>this.handleClickOpen(brand+"Open",this.state[brand+"Open"])}>
                                <TableCell>{frameArray.length}</TableCell>
                                <TableCell>{brand.toUpperCase()}</TableCell>
                                <TableCell>{this.state[brand+"Open"] ? <ExpandLess /> : <ExpandMore />}</TableCell>
                            </TableRow>
                            <Collapse in={this.state[brand+"Open"]} timeout="auto" unmountOnExit>
                                <div className={classes.collapsedTable}>
                                    {this.createRowFrame(allowedFrames,1)}
                                    {this.createRowFrame(overFrames,2)}
                                </div>
                            </Collapse>
                        </MuiThemeProvider>
                    </React.Fragment>
                )
            } else {
                return (
                <React.Fragment>
                    {this.createRowFrame(allowedFrames,1)}
                    {this.createRowFrame(overFrames,2)}
                </React.Fragment>
                )
            }
        }

我希望表格只是折叠起来，但仍然遵守列。

Answer 1

我认为您可以避免完全使用Collapse，而仅以编程方式有条件地显示新行。例如，您将替换代码的这一部分：

<Collapse in={this.state[brand+"Open"]} timeout="auto" unmountOnExit>
                                <div className={classes.collapsedTable}>
                                    {this.createRowFrame(allowedFrames,1)}
                                    {this.createRowFrame(overFrames,2)}
                                </div>
                            </Collapse>

具有：

this.state[brand+"Open"] && <>{Here put your new created row without the div }</>

语法可能不正确，但是我认为这可能有所帮助。

折叠表格更改布局

1 个答案: