Vue 中的 TreeView 未正确渲染子文件夹内容

我正在尝试建立一个TreeView在 Vue 中从头开始。This https://codesandbox.io/s/optimistic-wilbur-8dreq到目前为止是我的代码。

我遇到的第一个问题是子文件夹的内容（例如child folder 1) 未显示。第二个问题是最小化子文件夹会最小化整个树视图。

谁能帮助我理解为什么会出现这两个功能错误以及如何修复它们？

1. 您的代码仅处理文件夹的第一级，您应该递归地撤销树组件来处理子文件夹。请参考下面的文章。

https://itnext.io/recursion-for-nested-tree-struct-components-in-vue-1cb600005475 https://itnext.io/recursion-for-nested-tree-structure-components-in-vue-1cb600005475

2. 您的代码使用一个参数（isOpen）来切换最小化所有文件夹，因此如果 isOpen 为 false，则所有文件夹最小化；您应该使用 item.isOpen 来处理不同的项目；

treeData: {
        name: "My Tree",
        isOpen: true,
        children: [
          { name: "hello" },
          { name: "wat" },
          {
            name: "child folder",
            isOpen: false,
            children: [
              {
                name: "child folder 1",
                isOpen: false,
                children: [{ name: "hello" }, { name: "wat" }]
              },
              { name: "hello" },
              { name: "wat" },
              {
                name: "child folder 2",
                isOpen: false,
                children: [{ name: "hello" }, { name: "wat" }]
              }
            ]
          }
        ]
      }
    };