当前位置：首页 > VUE

vue element 实现批量删除

2026-02-21 18:19:33VUE

实现批量删除功能

在Vue和Element UI中实现批量删除功能需要结合表格的多选功能和后端API的批量删除接口。以下是具体实现方法：

表格添加多选功能

使用Element UI的el-table组件，启用多选框列：

<el-table
  ref="multipleTable"
  :data="tableData"
  @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <!-- 其他列 -->
</el-table>

处理选中项变化

在methods中定义处理选中项的方法：

handleSelectionChange(val) {
  this.multipleSelection = val;
}

添加批量删除按钮

在模板中添加批量删除按钮并绑定点击事件：

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

实现批量删除逻辑

在methods中实现批量删除的核心逻辑：

async handleBatchDelete() {
  try {
    const ids = this.multipleSelection.map(item => item.id);
    await this.$confirm('确定要删除选中的项吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    await deleteBatchItems(ids); // 调用后端API
    this.$message.success('删除成功');
    this.fetchData(); // 重新加载数据
    this.$refs.multipleTable.clearSelection(); // 清空选择
  } catch (error) {
    if (error !== 'cancel') {
      this.$message.error('删除失败');
    }
  }
}

后端API示例

定义批量删除的API调用方法：

const deleteBatchItems = (ids) => {
  return axios.delete('/api/items/batch', { data: { ids } });
}

注意事项

确保后端API支持接收ID数组进行批量删除
删除前添加确认对话框防止误操作
按钮状态应根据选中项动态变化
删除成功后及时更新表格数据和选中状态

完整示例代码

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

    <el-table
      ref="multipleTable"
      :data="tableData"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async handleBatchDelete() {
      try {
        const ids = this.multipleSelection.map(item => item.id);
        await this.$confirm('确定要删除选中的项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        await this.deleteBatchItems(ids);
        this.$message.success('删除成功');
        this.fetchData();
        this.$refs.multipleTable.clearSelection();
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败');
        }
      }
    },
    async deleteBatchItems(ids) {
      return this.$http.delete('/api/items/batch', { data: { ids } });
    },
    fetchData() {
      // 获取表格数据的方法
    }
  },
  created() {
    this.fetchData();
  }
}
</script>

通过以上步骤，可以在Vue和Element UI中实现完整的批量删除功能。

vue element 实现批量删除