Question

我将描述复制步骤，以更好地理解该问题：基本上，当我单击“颜色”节点时，它会将["Red", "Purple2", "Black"]正确地添加到扩展数组中，然后当我单击“黑色”时，它将呈现另一个子级。

但是，当前过滤器的问题在于，当我尝试折叠顶部父项"Colors"时，它会隐藏"Colors"的子项，但"Black"的子项仍然可见。

如何修改当前解决方案，以便对数组进行过滤以确保不显示折叠节点的所有子级？

我有一个flatttenArray结构，如下所示：

0: {id: 1, name: "Colors", depth: 1, parentId: null}
1: {id: 2, name: "Red", depth: 2, parentId: 1}
2: {id: 3, name: "Purple2", depth: 2, parentId: 1}
3: {id: 4, name: "Black", depth: 2, parentId: 1}
4: {id: 5, name: "Purple3", depth: 3, parentId: 4}
5: {id: 6, name: "Purple4", depth: 3, parentId: 4}

let renderSet = flattenData.filter(
      (item) => item.depth === 1 || expanded.includes(item.parentId)
    );

如何呈现此示例：

- Colors (Clicking on colors when Black is expanded causes red, purple2 and black to dissapear, but purple3 and purple4 remains visible)
   - Red
   - Purple2
   - Black
      - Purple3
      - Purple4

仅显示与过滤器匹配的节点。

它用于模仿层次结构。每当我单击其中一个节点时，id就会传递到expanded数组，该数组跟踪有关当前扩展的节点的信息。

过滤平面层次结构（单击父项时的折叠）

0 个答案: