如何在 vuetify 中显示树视图组件

Question

有人可以帮我在 vuetify 中渲染树视图吗 我有这样的回应 在这种情况下，我使用了 vuetify 框架

[
  {
    "id": 4,
    "name": "Test",
    "parent_id": 0,
    "image": "gVtHmE4tN18Y.png",
    "children": [
      {
        "id": 6,
        "name": "Test2",
        "parent_id": 4,
        "image": "XBpqGq6CinOm.png",
        "parent": [
          {
            "id": 7,
            "name": "Test3",
            "parent_id": 6,
            "image": "MNI3TmNXI1V5.png",
          }
        ]
      }
    ]
  }
]

我不知道如何在树视图中显示此响应 我尝试使用许多解决方案，但我没有任何结果 这是我发现的 如果有人知道如何做到这一点，那就太好了 感谢帮助

Answer 1

<v-treeview/> 默认加载'children' 属性（如果有）。但是，在您的示例中，我们可以看到在第一个孩子身上，它没有“孩子”属性。但是存在“父”属性，您也想将其视为子属性。

解决方案：您可以创建一个遍历所有节点的计算变量，检查它是否具有“父”属性，并添加与“父”属性具有相同值的“子”属性。 （我将使用这个解决方案 here 来遍历项目）。

<v-treeview :items="modifiedItems"/>

data: () => ({
  items: [{...}]
}),

computed: {
  modfiedItems() {
    // let's clone the items so we won't pollute the original data.
    const clonedItems = JSON.parse(JSON.stringify(this.items));
    this.traverse(clonedItems);
    return clonedItems;
  }
},
methods: {
  // reference: https://stackoverflow.com/a/722676/9183405
  traverse(items) {
    // check if the node is an object or array
    if (items !== null && typeof items === "object") {
      Object.entries(items).forEach(([key, value]) => {
        // check if the item/node has a 'parent' property
        if (key === "parent") {
          items.children = value; 
        }
        this.traverse(value);
      });
    }
  }
}

所以现在，如果一个节点/项目有一个“子”或“父”属性，它仍然会被加载到树视图上。如果两个属性都存在，则使用“children”。

这是一个示例代码demo。