使用 vuejs 和 javascript 迭代嵌套子級並顯示數據

Question

我有帶有嵌套子級的 treeview 文件夾結構。 有一些文件對象嵌套在子項中。 我想使用 vue 和 javascript 根據節點顯示這些文件的詳細信息。 這是模擬的數據：

 data:[{
  id: 1,
  name: ‘Project A’,
  type: ‘folder’,
  children: [{
    id: 4,
    name: 'Project A-1’,
    type: ‘folder’,
    files: [
      {
        id: 9,
        pid: 4,
        name: ‘file 3-A’,
        type:’file’,
        description: ‘wifi’,
        country: ‘USA'
      },
      {
        id: 10,
        pid: 4,
        name: ‘file 3-B’,
        type:’file’,
        description: ‘VPN’,
        country: ‘USA'
      }
    ]
  }
  ]
},
{
  id: 2,
  name: 'Services’,
  type: 'folder',
  children:[],
  files: [
    {
      id: 5,
      name: ‘Services-1-A’,
      type:’file’,
      pid: 2,
      description: ‘VPN’,
      country: ‘AUS'
    },
    {
      id: 6,
      name: ‘Services-1-B’,
      type:’file’,
      pid: 2,
      description: ‘WIFI’,
      country: ‘AUS'
    }
  ]
},
{
  id: 3,
  name: 'Servers',
  type: 'folder’,
  children:[],
  files: [
    {
      id: 7,
      name: ‘Servers-1-A’,
      type: ‘file’,
      pid: 3,
      description: ‘VPN’,
      country: ‘CAD'
    },
    {
      id: 8,
      name: ‘Servers-1-B',
      type: ‘file’,
      pid: 3,
      description: ‘WIFI’,
      country: ‘CAD'
    }
  ]
}]

用戶界面代碼：

<el-row style="background: #f2f2f2">
                  <el-col :span="6">
                   <div class="folder-content">
                     <el-tree
                         node-key="id"
                         :data="data"
                         accordion
                         @node-click="nodeclicked"
                         ref="tree"
                         style="background: #f2f2f2"
                         highlight-current
                         >
                         <span class="custom-tree-node" slot-scope="{ node, data }">
                             <span class="icon-folder" v-if="data.type === 'folder'">
                              <i class="el-icon-folder" aria-hidden="true"></i>
                              <span class="icon-folder_text" @click="showFiles(node.id) >{{ data.name }}</span>
                             </span>
                         </span>
                     </el-tree>
                   </div>
                 </el-col>
                 <el-col :span="12"><div class="entry-content">
                  <ul>
                      <li aria-expanded="false" v-for="(file,index) in files" :key="index">
                           <span class="folder__list"><input type="checkbox" :id= "file" :value="file">
                           <i class="el-icon-document" aria-hidden="true"></i>
                          <span class="folder__name">{{file.name}}</span></span>
                     </li>
                 </ul>
                   </div></el-col>
                 <el-col :span="6"><div class="preview_content"></div></el-col>
               </el-row>

方法：

    showFiles(id) {
  let f = this.data.filter(dataObject => {
    if (dataObject.children && dataObject.children.id === id) {
      return false
    } else if (!dataObject.children && dataObject.id === id) {
      return false
    }
    return true
  })[1]
  this.files = f.files
  console.log(this.files)
}

如果遍歷深層孩子，我想獲取這些文件詳細信息。 如果我單擊子文件夾“Project A-1”，那么我想在該子文件夾中顯示這些文件。 我試圖過濾掉，但它只顯示根文件夾文件（如果有的話）。 我無法在子級中顯示嵌套文件。

我正在使用原型而不是文件獲取整個節點詳細信息

如何迭代這些並顯示？

Answer 1

我相信這就是您正在尋找的。 我在代碼中寫了注釋來解釋我的思考過程。

 showFiles(id) { for (const dataObject of this.data) { if (this.dataObject.children && this.dataObject.children.id === id) { // check if file has children and if the child id is the same as the id. If it is, the files are the files of the nested child this.files = this.dataObject.children.files; break; } if (.this.dataObject.children && this.dataObject,id === id) { // if the data object does not have children and the id is the same as the id being looked for. the file is the root folder this.files = this.dataObject;files; break; } } }