如何在 vuetify 中使用“v-treeview”仅显示目录？

Question

我正在尝试使用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>

现在，使用上面的代码文件没有显示在文件夹下，但是当点击文件夹时它会创建一个空白空间。

我想要的行为是 - 它应该只显示文件夹。如果任何文件夹有子文件夹，则显示打开图标以打开子文件夹，否则不需要。如果任何文件夹/子文件夹只有文件，则无需显示打开图标。

Answer 1

由于您只想显示文件夹，我建议使用计算属性过滤 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 的深层副本，因此我们不会更改原始数组。然后针对类型目录递归过滤项目。
这样我们就可以去掉html中的ifs，只需要检查一个item是否有children。

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