材质UI手风琴摘要

Question

我有一个非常特殊的案例，可以在我的get_response中显示“选定项目计数”： 以下应该是行为：

用户单击“标题”复选框时，应在该面板中选择“所有项目”，然后将这些项目的计数显示为Material UI - Accordion Summary

现在，我可以执行以下操作：

您可以看到每个面板上都显示了选定的项目数，但我只希望它显示在选定面板中。

以下是我的以上屏幕截图代码：

X Selected

EnhancedTableToolbar

{unsubscribedEmployeeData ? Object.entries(unsubscribedEmployeeData).map(([name, value]) => {
            return (
                    <Accordion TransitionProps={{ unmountOnExit: true }}>
                      <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-label="Expand"
                        aria-controls="additional-actions1-content"
                        id="additional-actions1-header"
                      >
                        <EnhancedTableToolbar numSelected={selected.length} name={name} values={value} />
                      </AccordionSummary>
                      <AccordionDetails>
                        <Typography color="textSecondary">
                          <div className={classes.root}>
                            <Paper className={classes.paper}>
                              <TableContainer>
                                <Table
                                  className={classes.table}
                                  aria-labelledby="tableTitle"
                                  size={dense ? 'small' : 'medium'}
                                  aria-label="enhanced table"
                                >
                                  <TableBody>
                                    {stableSort(value, getComparator(order, orderBy))
                                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                                      .map((row, index) => {
                                        const isItemSelected = isSelectedID(row.id);
                                        const labelId = `enhanced-table-checkbox-${index}`;
                                      
                                        return (
                                          <TableRow
                                            hover
                                            onClick={(event) => handleClick(event, row.first_name + " " + row.last_name, row.id)}
                                            role="checkbox"
                                            aria-checked={isItemSelected}
                                            tabIndex={-1}
                                            key={row.id}
                                            selected={isItemSelected}
                                          >
                                            <TableCell padding="checkbox">
                                              <Checkbox
                                                checked={isItemSelected}
                                                inputProps={{ 'aria-labelledby': labelId }}
                                              />
                                            </TableCell>
                                            <TableCell  align="center" component="th" id={labelId} scope="row" >
                                              {row.first_name + " " + row.last_name}
                                            </TableCell>
                                            <TableCell align="center">{row.email}</TableCell>

                                          </TableRow>
                                        );
                                      })}
                                  </TableBody>
                                </Table>
                              </TableContainer>
                            </Paper>
                          </div>
                        </Typography>
                      </AccordionDetails>
                    </Accordion>
                );
        }) : undefined}

handleSelectAllClick

 const EnhancedTableToolbar = (props) => {
  const classes = useToolbarStyles();
  const { numSelected, name, values } = props;

  return (
    <Toolbar
      className={clsx(classes.root)}
    >
      {numSelected > 0 ? (
        <>
          <EnhancedTableHead
              classes={classes}
              numSelected={selected.length}
              onSelectAllClick={(event) => handleSelectAllClick(event,values)}
              rowCount={values.length}
              label={name}
          />
          <Typography   component="div">
            {numSelected} selected
          </Typography>
        </>
      ) : (
        <EnhancedTableHead
              classes={classes}
              numSelected={selected.length}
              onSelectAllClick={(event) => handleSelectAllClick(event,values)}
              rowCount={values.length}
              label={name}
        />
      )}
    </Toolbar>
  );
};

请指导我。谢谢