使用 vuejs 获取树的特定节点的详细信息答案

【问题标题】：get details of specific node of a tree using vuejs使用 vuejs 获取树的特定节点的详细信息
【发布时间】：2020-08-17 08:02:01
【问题描述】：

我有一个树形数据结构。在该结构中，有嵌套的子节点，其中包含文件数组。我想根据节点点击事件获取这些文件的详细信息。

这是树模拟数据：

    data:[{
  id: 1,
  name: 'Resources',
  type:'folder,
  files: [],
  children: [
    {
      id: 4,
      name: 'Resources Zone 1-A',
      type: 'folder',
      files: [
        "Resources-zone-east.doc",
        "Resources-zone-east-1-A.doc"
      ]
    }
  ]
},
{
  id: 2,
  name: 'Services',
  type: 'folder',
  files: [
    "Services-east-zone-2A.doc",
    "Services-West-zone-2A.doc"
  ],
  children: [
     id: 5,
     name: 'Services-South-Zone-3B",
     type: 'folder',
     files: [
         "Services-South-zone-3B1.doc",
         "Services-South-zone-3B2.doc"
      ], 
    ]
  },
{
  id: 3,
  name: 'Servers',
  type: 'folder',
  files: [
    'Servers-east-zone-3B.doc',
    'Servers-west-zone-3B.doc'
  ],
  children: []
}]

我想这样做。如果我点击子节点 'Services-South-Zone-3B' 那么我会将这些文件放入一个数组中 ->

let result=["Services-South-zone-3B1.doc","Services-South-zone-3B2.doc"]

如何像这样迭代和显示文件？

【问题讨论】：

标签： javascript arrays vue.js vuejs2 tree

【解决方案1】：

您可以使用递归组件，请参阅：https://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components

这是一个基于您的数据的简单示例：

const Node = {
  name: 'node',
  template: `
    <div>
        <a @click="$emit('input', value.files)">
        {{ value.name }}
      </a>
      <node v-if="value.children" v-for="child in value.children" :key="child.id" :value="child" @input="$emit('input', $event)"/>
    </div>
  `,
  props: ['value']
};

new Vue({
  el: '#app',
  components: {
    Node
  },
  data() {
    return {
      tree: {
        id: 0,
        name: 'Root',
        files: [],
        children: [{
            id: 1,
            name: 'Resources',
            type: 'folder',
            files: [],
            children: [{
              id: 4,
              name: 'Resources Zone 1-A',
              type: 'folder',
              files: [
                'Resources-zone-east.doc',
                'Resources-zone-east-1-A.doc'
              ]
            }]
          },
          {
            id: 2,
            name: 'Services',
            type: 'folder',
            files: [
              'Services-east-zone-2A.doc',
              'Services-West-zone-2A.doc'
            ],
            children: [{
              id: 5,
              name: 'Services-South-Zone-3B',
              type: 'folder',
              files: [
                'Services-South-zone-3B1.doc',
                'Services-South-zone-3B2.doc'
              ]
            }]
          },
          {
            id: 3,
            name: 'Servers',
            type: 'folder',
            files: [
              'Servers-east-zone-3B.doc',
              'Servers-west-zone-3B.doc'
            ],
            children: []
          }
        ]
      }
    };
  },
  methods: {
    log(value) {
      console.log(value);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <node :value="tree" @input="log"></node>
</div>

这是一个基本的树形结构。 node 组件引用自身来迭代其子级。 input 事件冒泡到根实例。

【讨论】：