Блог

Я использую дерево пользовательского интерфейса element для своего приложения vue. Я внедряю систему типа «Файловый браузер» для своего приложения. Здесь файлы вложены в дочерние элементы.При нажатии на дочерний узел эти вложенные файлы или документы будут отображаться справа в другом контейнере. Я не могу перебирать дочерние элементы и отображать эти файлы.

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

Вот мой код пользовательского интерфейса

 <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>
  

Метод Show files:

 showFiles(id) {
 let f = this.data.filter(dataObject => {
    if (dataObject.children amp;amp; dataObject.children.id === id) {
      return false
    } else if (!dataObject.children amp;amp; dataObject.id === id) {
      return false
    }
    return true
  })[0]
  this.files = f.files
}
}
  

Я пытаюсь сделать вот так:

Я заметил ошибку в вашей функции фильтрации. Проверьте строку 3 :

 showFiles(id) {
 let f = this.data.filter(dataObject => {
     //isn't this suppose to return true?
    if (dataObject.children amp;amp; dataObject.children.id === id) {
      return false
    } else if (!dataObject.children amp;amp; 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>