Vue 实现网盘文件列表树状结构 - 根据 parentFolderUUID 和 username 查询

可以使用 Vue 的组件来实现网盘的文件列表树状结构。

首先，需要定义一个文件夹组件和一个文件组件。文件夹组件包含文件夹的名称和子文件夹列表和文件列表。文件组件包含文件的名称和大小。

然后，在父组件中，根据传入的 parentFolderUUID 和 username，从服务器获取文件和文件夹列表数据。使用递归的方式，将文件夹组件和文件组件添加到树状结构中。最终，将树状结构渲染到页面上。

下面是一个简单的 Vue 组件示例：

<template>
  <div>
    <div v-for='folder in folders'>
      <folder :folder='folder' />
    </div>
    <div v-for='file in files'>
      <file :file='file' />
    </div>
  </div>
</template>

<script>
import Folder from './Folder.vue'
import File from './File.vue'

export default {
  props: {
    parentFolderUUID: String,
    username: String
  },
  data() {
    return {
      folders: [],
      files: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 从服务器获取数据，根据 parentFolderUUID 和 username
      // 更新 folders 和 files 列表
    }
  },
  components: {
    Folder,
    File
  }
}
</script>

在上面的代码中，我们定义了一个父组件，它接受两个 props：parentFolderUUID 和 username。在 created 钩子中，调用 fetchData 方法来获取数据。fetchData 方法将从服务器获取数据，并更新 folders 和 files 列表。

然后，我们使用 v-for 指令来遍历 folders 和 files 列表，并将每个文件夹和文件传递给相应的组件。

下面是文件夹组件的示例代码：

<template>
  <div>
    <div>{{ folder.name }}</div>
    <div>
      <div v-for='subfolder in folder.subfolders'>
        <folder :folder='subfolder' />
      </div>
      <div v-for='file in folder.files'>
        <file :file='file' />
      </div>
    </div>
  </div>
</template>

<script>
 export default {
  props: {
    folder: Object
  },
  components: {
    Folder,
    File
  }
}
</script>

在上面的代码中，我们定义了一个文件夹组件，它接受一个 props：folder。在组件中，我们使用 v-for 指令来遍历子文件夹和文件列表，并将每个子文件夹和文件传递给相应的组件。

最后，我们需要定义一个文件组件的示例代码：

<template>
  <div>
    <div>{{ file.name }}</div>
    <div>{{ file.size }}</div>
  </div>
</template>

<script>
 export default {
  props: {
    file: Object
  }
}
</script>

在上面的代码中，我们定义了一个文件组件，它接受一个 props：file。在组件中，我们展示了文件的名称和大小。

最终，我们可以将父组件、文件夹组件和文件组件组合在一起，来实现网盘的文件列表树状结构。