vue实现文件列表

Vue 实现文件列表的方法

使用 Vue 实现文件列表功能可以通过多种方式完成，以下是几种常见的实现方法。

使用 v-for 渲染文件列表

通过 v-for 指令动态渲染文件列表，结合 v-bind 绑定文件属性。

<template>
  <div>
    <ul>
      <li v-for="file in files" :key="file.id">
        {{ file.name }} - {{ file.size }} KB
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [
        { id: 1, name: 'document.pdf', size: 1024 },
        { id: 2, name: 'image.jpg', size: 512 },
        { id: 3, name: 'report.xlsx', size: 2048 }
      ]
    };
  }
};
</script>

实现文件上传与列表展示

结合文件上传功能，动态更新文件列表。

<template>
  <div>
    <input type="file" @change="handleFileUpload" multiple>
    <ul>
      <li v-for="(file, index) in uploadedFiles" :key="index">
        {{ file.name }} - {{ (file.size / 1024).toFixed(2) }} KB
        <button @click="removeFile(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadedFiles: []
    };
  },
  methods: {
    handleFileUpload(event) {
      this.uploadedFiles = [...this.uploadedFiles, ...event.target.files];
    },
    removeFile(index) {
      this.uploadedFiles.splice(index, 1);
    }
  }
};
</script>

使用第三方库实现文件列表

如果需要更复杂的功能（如拖拽排序、预览等），可以使用第三方库如 vue-dropzone 或 vue-upload-component。

安装 vue-upload-component：

npm install vue-upload-component

示例代码：

<template>
  <div>
    <file-upload
      ref="upload"
      v-model="files"
      post-action="/upload"
      @input-file="updateFileList"
    ></file-upload>
    <ul>
      <li v-for="file in files" :key="file.id">
        {{ file.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import FileUpload from 'vue-upload-component';

export default {
  components: {
    FileUpload
  },
  data() {
    return {
      files: []
    };
  },
  methods: {
    updateFileList(files) {
      this.files = files;
    }
  }
};
</script>

实现文件列表分页

对于大量文件，可以通过分页展示。

<template>
  <div>
    <ul>
      <li v-for="file in paginatedFiles" :key="file.id">
        {{ file.name }}
      </li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [
        /* 文件列表数据 */
      ],
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    paginatedFiles() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.files.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.files.length / this.itemsPerPage);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
};
</script>

以上方法涵盖了从基础到进阶的文件列表实现方式，可以根据具体需求选择适合的方案。