Vue 中的 TreeView 无法正确呈现子文件夹内容 [英] TreeView in Vue not rendering subfolder content correctly

问题描述

我正在尝试在 Vue 中从头开始构建一个 TreeView.这是我目前的代码.

I'm trying to build a TreeView from scratch in Vue. This is my code so far.

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

The first problem I'm encountering is that the content of the subfolders (like child folder 1) is not being displayed. The second problem is that minimizing the subfolders minimizes the whole treeview.

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

Could anyone help me understand why these two errors in functionality are occurring and how to fix them?

推荐答案

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" }]
              }
            ]
          }
        ]
      }
    };

这篇关于Vue 中的 TreeView 无法正确呈现子文件夹内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！