当前位置：首页 > VUE

vue实现全选下载

2026-01-08 06:20:02VUE

Vue实现全选下载功能

全选下载功能通常涉及前端文件列表的多选操作和批量下载逻辑。以下是基于Vue的实现方案：

数据准备与渲染

在Vue组件中定义文件列表数据和选中状态：

data() {
  return {
    files: [
      { id: 1, name: 'file1.pdf', url: '/download/file1' },
      { id: 2, name: 'file2.jpg', url: '/download/file2' }
    ],
    selectedFiles: []
  }
}

使用v-for渲染文件列表，并绑定复选框：

vue实现全选下载

<div v-for="file in files" :key="file.id">
  <input 
    type="checkbox" 
    v-model="selectedFiles" 
    :value="file.id"
  >
  {{ file.name }}
</div>

全选逻辑实现

添加全选复选框控制所有选项：

computed: {
  allSelected: {
    get() {
      return this.selectedFiles.length === this.files.length
    },
    set(value) {
      this.selectedFiles = value 
        ? this.files.map(file => file.id)
        : []
    }
  }
}

模板中添加全选控制：

vue实现全选下载

<input 
  type="checkbox" 
  v-model="allSelected"
> 全选

批量下载实现

创建下载方法处理多文件下载：

methods: {
  downloadSelected() {
    if (this.selectedFiles.length === 0) return

    this.selectedFiles.forEach(id => {
      const file = this.files.find(f => f.id === id)
      if (file) {
        const link = document.createElement('a')
        link.href = file.url
        link.download = file.name
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }
    })
  }
}

添加下载按钮触发操作：

<button @click="downloadSelected">
  下载选中文件 ({{ selectedFiles.length }})
</button>

服务器端配合

对于需要验证的下载请求，可以使用axios发送请求：

downloadWithAuth(file) {
  axios.get(file.url, {
    responseType: 'blob',
    headers: { Authorization: 'Bearer ' + token }
  }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.download = file.name
    link.click()
    window.URL.revokeObjectURL(url)
  })
}