如何将 PrimeVue Tree 项目渲染为链接？

Question

我正在用 primevue 制作一棵树，但在访问子对象的值时遇到问题，这是我的代码：

<Tree :value="nodes"></Tree>

setup() {
      let name = 'chris'
      let age = 19
      let nodes = [
            {
              key: 0,
              label: "test1",
              children: [
                  {key: 0-0, label: "test0.1", data:"https://www.google.com", type: 'url'},
                  {key: 0-1, label: "test0.2", data:"https://www.google.com", type: 'url'},
                  {key: 0-2, label: "test0.3", data:"https://www.google.com", type: 'url'},
                  {key: 0-3, label: "test0.4", data:"https://www.google.com", type: 'url'}
              ]
            },
            {
              key: 1,
              label: "test2",
              children: [
                  {key: 1-0, label: "test1.1", data:"https://www.google.com", type: 'url'},
                  {key: 1-1, label: "test1.2", data:"https://www.google.com", type: 'url'},
                  {key: 1-2, label: "test1.3", data:"https://www.google.com", type: 'url'},
                  {key: 1-3, label: "test1.4", data:"https://www.google.com", type: 'url'}
              ]
            },
            ]

      return {name, age, nodes}
  },

我希望能够单击树项并让它们将我带到数据中指定的 link。我该怎么办？

Answer 1

Tree 支持 url 插槽，允许您指定如何呈现树项目。使用该插槽为每个 child:

呈现一个 a 标签

<template>
  <Tree :value="nodes">
    <template #url="{ node }">
      <a :href="node.data">{{ node.label }}</a>
    </template>
  </Tree>
</template>

demo

如何将 PrimeVue Tree 项目渲染为链接？

How can I render PrimeVue Tree items as links?

arrays

object

vue.js

primevue

vuejs3