3

我在我的项目中使用 react-table 组件。行扩展属性是我的功能使用的东西，现在工作正常。

我需要能够在展开一行时折叠所有行。即一次只能打开一排。我确实浏览了许多文档和 stackoverflow 链接，但没有一个没有成功。请注意，此实现使用钩子。就像这里提到的：https ://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding

默认情况下，它们允许一次打开多行，但我需要执行相反的操作。

我最接近的是：Auto expandable rows and subrows react table using hooks

但在这里它在初始加载时打开。

谢谢

4

1 回答 1

5

我这里只添加了一部分App功能。Codesandbox：https ://codesandbox.io/s/jolly-payne-dxs1d?fontsize=14&hidenavigation=1&theme=dark 。

注意：我不习惯react-table库。此代码是仅适用于具有两级行的表的示例。您可以使用递归或其他方式优化代码，以使代码在多级表中工作。

Cell: ({ row, rows, toggleRowExpanded }) =>
          // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
          // to build the toggle for expanding a row
          row.canExpand ? (
            <span
              {...row.getToggleRowExpandedProps({
                style: {
                  // We can even use the row.depth property
                  // and paddingLeft to indicate the depth
                  // of the row
                  paddingLeft: `${row.depth * 2}rem`
                },
                onClick: () => {
                  const expandedRow = rows.find(row => row.isExpanded);

                  if (expandedRow) {
                    const isSubItemOfRow = Boolean(
                      expandedRow && row.id.split(".")[0] === expandedRow.id
                    );

                    if (isSubItemOfRow) {
                      const expandedSubItem = expandedRow.subRows.find(
                        subRow => subRow.isExpanded
                      );

                      if (expandedSubItem) {
                        const isClickedOnExpandedSubItem =
                          expandedSubItem.id === row.id;
                        if (!isClickedOnExpandedSubItem) {
                          toggleRowExpanded(expandedSubItem.id, false);
                        }
                      }
                    } else {
                      toggleRowExpanded(expandedRow.id, false);
                    }
                  }
                  row.toggleRowExpanded();
                }
              })}
            >
              {row.isExpanded ? "" : ""}
            </span>
          ) : null
于 2020-03-18T16:12:01.130 回答