当前位置：首页 > VUE

vue 实现文件列表

2026-01-18 00:37:33VUE

Vue 实现文件列表的方法

使用 v-for 渲染文件列表

在 Vue 中可以通过 v-for 指令动态渲染文件列表。假设有一个文件数组 files，可以在模板中遍历显示文件名和其他信息。

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

添加文件上传功能

通过 <input type="file"> 和 @change 事件可以实现文件上传，并将上传的文件添加到列表中。

<template>
  <div>
    <input type="file" @change="handleFileUpload" multiple>
    <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: []
    }
  },
  methods: {
    handleFileUpload(event) {
      const uploadedFiles = Array.from(event.target.files)
      uploadedFiles.forEach(file => {
        this.files.push({
          id: Date.now(),
          name: file.name,
          size: Math.round(file.size / 1024)
        })
      })
    }
  }
}
</script>

使用第三方库增强功能

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

<template>
  <div>
    <file-upload
      :multiple="true"
      @input="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 files" :key="file.id">
        {{ file.name }}
        <button @click="removeFile(file.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    removeFile(id) {
      this.files = this.files.filter(file => file.id !== id)
    }
  }
}
</script>

样式优化

使用 CSS 或 UI 框架（如 Element UI、Vuetify）美化文件列表显示。

<template>
  <el-table :data="files">
    <el-table-column prop="name" label="文件名"></el-table-column>
    <el-table-column prop="size" label="大小(KB)"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="removeFile(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

通过以上方法可以实现基础的文件列表功能，并根据需求扩展更多交互特性。

vue 实现文件列表