vue批量删除实现

实现 Vue 批量删除功能

在 Vue 中实现批量删除功能通常涉及以下几个关键步骤：

数据绑定与选择控制

使用 v-model 绑定复选框数组，存储被选中项的 ID 或索引：

<template>
  <div v-for="item in list" :key="item.id">
    <input 
      type="checkbox" 
      v-model="selectedItems" 
      :value="item.id"
    >
    {{ item.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  }
}
</script>

删除逻辑实现

通过数组过滤方法移除选中项：

methods: {
  batchDelete() {
    this.list = this.list.filter(
      item => !this.selectedItems.includes(item.id)
    )
    this.selectedItems = [] // 清空选中状态
  }
}

全选/反选功能

添加全选复选框提升用户体验：

<input 
  type="checkbox" 
  v-model="selectAll"
  @change="toggleSelectAll"
>
全选

对应方法实现：

computed: {
  selectAll: {
    get() {
      return this.selectedItems.length === this.list.length
    },
    set(value) {
      this.selectedItems = value 
        ? this.list.map(item => item.id) 
        : []
    }
  }
}

后端 API 集成

实际项目中通常需要调用接口：

async batchDelete() {
  try {
    await axios.delete('/api/items', {
      data: { ids: this.selectedItems }
    })
    // 更新本地数据
    this.fetchData()
  } catch (error) {
    console.error(error)
  }
}

注意事项

• 添加加载状态防止重复提交
• 实现删除前的确认对话框
• 列表为空时禁用删除按钮
• 使用 Vuex 管理状态时需通过 mutations 修改数据

完整示例组件：

<template>
  <div>
    <button 
      @click="batchDelete"
      :disabled="!selectedItems.length"
    >
      批量删除
    </button>

    <table>
      <tr v-for="item in list" :key="item.id">
        <td>
          <input 
            type="checkbox"
            v-model="selectedItems"
            :value="item.id"
          >
        </td>
        <td>{{ item.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      list: [] // 从API获取
    }
  },
  methods: {
    async batchDelete() {
      if (!confirm('确认删除选中项？')) return

      try {
        await this.$api.deleteItems(this.selectedItems)
        this.list = this.list.filter(
          item => !this.selectedItems.includes(item.id)
        )
        this.selectedItems = []
      } catch (error) {
        alert('删除失败')
      }
    }
  }
}
</script>