使用 vue 在元素 ui 树的子项中显示嵌套文件

Question

我正在为我的 vue 应用程序使用元素 ui 树。我正在为我的应用程序实现“文件浏览器”类型系统。在这里，文件嵌套到子节点中。单击子节点时，这些嵌套文件或文档将显示在不同容器的右侧。我无法遍历子项并显示这些文件。

**Here is the mocked data :**

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'
        }
      ]
    }]

这是我的 UI 代码

<el-row>
                      <el-col :span="8" style="background: #f2f2f2">
                       <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">
                                  <i class="el-icon-folder" aria-hidden="true"></i>
                                  <span class="icon-folder_text" @click="showFiles(data.id)">{{ data.name }}</span>
                                 </span>
                             </span>
                         </el-tree>
                       </div>
                     </el-col>
                     <el-col :span="16"><div class="entry-content">
                      <ul>
                       <li aria-expanded="false" v-for="(file,index) in files" :key="index">
                             <div class="folder__list"><input type="checkbox" :id= "file" :value="file" v-model="checkedFiles" @click="check">
                             <i class="el-icon-document" aria-hidden="true"></i>
                             <span class="folder__name">{{file}}</span></div>
                       </li>
                     </ul>
                       </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
  })[0]
  this.files = f.files
}
}

我正在尝试这样做：

Answer 1

我注意到您的过滤器功能存在错误。检查第 3 行：

showFiles(id) {
 let f = this.data.filter(dataObject => {
     //isn't this suppose to return true?
    if (dataObject.children && dataObject.children.id === id) {
      return false
    } else if (!dataObject.children && dataObject.id === id) {
      return false
    }
    return true
  })[0]
  this.files = f.files
}

为什么使用filter() 方法搜索单个元素？它将扫描所有元素。您可以只使用find() 来提高性能和更好的可读性代码。 试试这个：

showFiles(id) {
    let f = this.data.find(dataObject => dataObject.id == id);
   //ensure node was returned
   if(f ){
     this.files = f.files
   }
}

但是，您可以尝试在您的组件中执行此操作。 向组件的数据对象添加另一个属性。使用新属性来保存选定的节点。

  data(){
      //your mock data
      tree:[],
      //children files being displayed
      files:[]
    
  },
  methods:{
      showFiles(branch){
           this.files = branch.files;
      }
  }

然后将整个对象传递给方法

<span class="icon-folder_text" @click="showFiles(data)">{{ data.name }}</span>