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

Question

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

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

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

Answer 1

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

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

2. 您的代码使用一个参数 (isOpen) 来切换最小化所有文件夹，因此如果 isOpen 为假，则所有文件夹最小化；你应该使用 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" }]
              }
            ]
          }
        ]
      }
    };