当前位置：首页 > VUE

vue前端实现批量删除

2026-01-21 16:59:47VUE

Vue前端实现批量删除的方法

使用v-model绑定选中状态

在表格或列表中为每个项目添加复选框，通过v-model绑定选中状态。创建一个数组selectedItems存储选中的项目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: [...], // 数据列表
      selectedItems: [] // 存储选中ID
    }
  },
  methods: {
    batchDelete() {
      if(this.selectedItems.length === 0) {
        alert('请至少选择一项');
        return;
      }
      // 调用删除API
    }
  }
}
</script>

调用API实现批量删除

通过axios或fetch发送删除请求到后端API，通常需要传递选中ID数组。

methods: {
  async batchDelete() {
    try {
      const response = await axios.delete('/api/items/batch', {
        data: { ids: this.selectedItems }
      });
      // 处理成功响应
      this.fetchData(); // 重新获取数据
      this.selectedItems = []; // 清空选中
    } catch (error) {
      console.error('删除失败:', error);
    }
  }
}

添加确认对话框

在删除前添加确认提示，防止误操作。

methods: {
  batchDelete() {
    if(this.selectedItems.length === 0) return;

    if(confirm(`确定要删除选中的${this.selectedItems.length}项吗?`)) {
      this.executeBatchDelete();
    }
  }
}

使用Element UI等UI库

如果使用Element UI，可以利用其表格组件和批量操作功能。

<template>
  <el-table
    :data="items"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>

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

<script>
export default {
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val.map(item => item.id);
    }
  }
}
</script>