前端 - vue2实现新建文件夹功能？

Question

一开始是没有文件夹的，点击加+就新建一个文件夹，从excel里面导入数据就存在这里面，有类似的库吗,还是用原生dom写

Answer 1

你可以用第三方库，VueFileManage或者：

<template>
  <div>
    <button @click="createFolder">新建文件夹</button>
    <input type="file" @change="importFromExcel" />
    <div v-for="folder in folders" :key="folder.id">
      {{ folder.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      folders: [],
      folderId: 0,
    };
  },
  methods: {
    createFolder() {
      this.folderId++;
      this.folders.push({
        id: this.folderId,
        name: `文件夹${this.folderId}`,
      });
    },
    importFromExcel(e) {
      const file = e.target.files[0];
      // 用第三方库如 xlsx 来处理 Excel 文件
      // const data = xlsx.read(file, { type: 'binary' });
      // 然后你可以把数据存储到你新建的文件夹里
    },
  },
};
</script>

Answer 2

看OP的描述，这算是具体的一个业务逻辑了，和Vue并没有什么关系。

具体实现的思路，得看原先的业务逻辑，是每次操作完就请求服务器，还是在前端缓存最后一次性完整目录到服务器。

如果是每次操作完成都请求服务器，那么就是和评论中说的一样每次都请求接口，同时让服务端增加一个 目录类型即可。
如果是前端缓存最后一次性提交的话，就是在你原先的业务代码中增加一个目录类型。
如果是全新的项目，那么就是看项目使用的UI库是什么，一般都会提供一个 树组件（xx-tree），然后按照组件文档操作树节点这样就可以实现简单目录管理的前端部分了。

这都是很笼统的回答，更加具体的得需要有更详细的需求描述才行了。