Vue中的TreeView无法正确呈现子文件夹内容

Question

我正在尝试在 Vue 中从头开始构建 TreeView。到目前为止，This 是我的代码。

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

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

Answer 1

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

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

1. 您的代码使用一个参数 (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" }]
              }
            ]
          }
        ]
      }
    };