vue批量删除实现

Vue 批量删除实现方法

使用 v-model 绑定选中项

在表格或列表中为每个项目添加复选框，通过 v-model 绑定到数组。选中项的 ID 会存储在数组中。

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td><input type="checkbox" v-model="selectedItems" :value="item.id"></td>
        <td>{{ item.name }}</td>
      </tr>
    </table>
    <button @click="batchDelete">批量删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItems: []
    }
  },
  methods: {
    batchDelete() {
      if (this.selectedItems.length === 0) return
      this.items = this.items.filter(item => !this.selectedItems.includes(item.id))
      this.selectedItems = []
    }
  }
}
</script>

结合后端 API 删除

实际项目中通常需要调用 API 进行删除操作。以下示例展示如何结合 axios 发送删除请求。

methods: {
  async batchDelete() {
    if (this.selectedItems.length === 0) return
    try {
      await axios.post('/api/items/batch-delete', { ids: this.selectedItems })
      this.items = this.items.filter(item => !this.selectedItems.includes(item.id))
      this.selectedItems = []
    } catch (error) {
      console.error('删除失败', error)
    }
  }
}

使用 Element UI 实现批量删除

如果使用 Element UI 组件库，可以利用其表格组件内置的多选功能。

<template>
  <el-table
    :data="items"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
  <el-button @click="batchDelete" :disabled="!selectedItems.length">批量删除</el-button>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      selectedItems: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val.map(item => item.id)
    },
    batchDelete() {
      this.$confirm('确认删除选中项?', '提示', {
        type: 'warning'
      }).then(async () => {
        await this.$http.post('/api/delete', { ids: this.selectedItems })
        this.fetchData() // 重新获取数据
      })
    }
  }
}
</script>

性能优化建议

对于大数据量场景，建议采用分页删除策略，避免一次性发送过多 ID。可以分批发送删除请求，或让后端支持范围删除。

// 分批删除示例
const batchSize = 50
for (let i = 0; i < this.selectedItems.length; i += batchSize) {
  const batchIds = this.selectedItems.slice(i, i + batchSize)
  await axios.post('/api/batch-delete', { ids: batchIds })
}