Блог

Я пытаюсь показать только каталог / папки, используя v-treeview . Объект ответа поступает как родительско-дочерняя комбинация

• Если родительская папка, то тип directory
• Если дочерний элемент является файлом, то тип file

Ниже приведен мой код:

 <v-treeview v-model="tree" :items="fileStructure" activable item-key="path" :open="open" :filter="filter" :search="search" open-on-click>
          <template v-slot:prepend="{ item, open }">
            <v-icon v-if="item.type == 'directory'" color="blue-grey darken-1">
              {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
            </v-icon>
          </template>
          <template v-if="item.type == 'directory'" slot="label" slot-scope="{ item }">
            <a @click="showSelectedSubFolders(item)" v-if="item.type == 'directory'">{{ item.name }}</a>
          </template>
</v-treeview>
  

Теперь, используя приведенный выше код, файлы не отображаются под папкой, но при нажатии на папку создается пустое пространство.

Поведение, которое я хочу, — оно должно показывать только папки. Если в каких-либо папках есть вложенные папки, тогда покажите значок открытия, чтобы открыть вложенные папки, в противном случае это не требуется. Если в каких-либо папках / подпапках есть только файлы, нет необходимости показывать значок открытия.

Поскольку вы хотите показывать только папки, я предлагаю фильтровать fileStructure с помощью вычисляемого свойства:

 computed: {
  filteredItems() {
    const temp = JSON.parse(JSON.stringify(this.fileStructure))
    
    function f(item) {
      if(item.children) {
        item.children = item.children.filter(f)
      }
      return item.type === "directory"
    }

    return temp.filter(f)
  }
}
  

Это создало глубокую копию fileStructure , поэтому мы не изменяем исходный массив. Затем элементы рекурсивно фильтруются для каталога типа.
Таким образом, мы можем избавиться от ifs в html, и нам нужно только проверить, есть ли у элемента дочерние элементы.

 <v-treeview v-model="tree" :items="filteredItems" activable item-key="path" :open="open" :filter="filter" :search="search" open-on-click>
  <template v-slot:prepend="{ item, open }">
    <v-icon v-if="item.children amp;amp; item.children.length > 0" color="blue-grey darken-1">
      {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
    </v-icon>
  </template>
  <template slot="label" slot-scope="{ item }">
    <a @click="showSelectedSubFolders(item)">{{ item.name }}</a>
  </template>
</v-treeview>