时间戳

首页 > 解决方案 > Material-UI 多表折叠/展开

javascript - Material-UI 多表折叠/展开

问题描述

我正在尝试使用 MateialUI 制作一个可折叠的表格目前，我的幻灯片都有折叠但它们链接到一个“打开”状态，所以如果我打开一张幻灯片，所有其他幻灯片都会打开。

这里是一个 sansbox：https ://codesandbox.io/s/withered-bash-e1mzu?file=/src/components/BrandTable.js

props 对象数组需要为我拥有的每张幻灯片提供一个可折叠的表格。

const props = [
            {slide: "Protein", charts: ["Keto"]},
            {slide: "Bars with benefits - beyond the nutritional profile", charts: ["Innovative approaches"]},
            {slide: "Vegan", charts: []}
          ]

        return (
        <div>
        
        
       
        {
       
          props.map((blog) => 
          
          <React.Fragment>
        <TableRow  key={props} >
          <TableCell component="th" scope="row">
            {blog.slide}
          </TableCell>
          <TableCell size="small">
            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon/>}
            </IconButton>
          </TableCell>
        </TableRow> 
        <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
                {
                    open &&   <Box margin={1}>
                    <Table size="small" aria-label="purchases">
                      <TableBody>
                      {blog.charts}
                      </TableBody>
  
                    </Table>
                  </Box>
                }
                </Collapse>
          </TableCell>
        </TableRow>
          }

      </React.Fragment>
          
          
          
          )
        }
       
            </div> 

            

    )
}

标签： javascriptreactjsmaterial-ui

解决方案

请尝试在此处查看此示例： https ://codesandbox.io/s/kbcee

我认为您可以存储扩展行的活动 ID，而不仅仅是打开/关闭状态。或者，您可以创建Row每次仅在组件内部使用打开状态的组件。

推荐阅读