当前位置：首页 > VUE

vue element 实现批量删除

2026-01-21 02:46:45VUE

实现批量删除功能

在Vue和Element UI中实现批量删除功能，主要涉及表格多选、批量操作按钮和删除逻辑的实现。

表格多选配置

在Element UI的el-table组件中启用多选功能，需要添加selection列和row-key属性：

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

处理选中项

通过selection-change事件获取当前选中的行数据：

data() {
  return {
    multipleSelection: []
  }
},
methods: {
  handleSelectionChange(val) {
    this.multipleSelection = val;
  }
}

批量删除按钮

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

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

删除逻辑实现

实现批量删除方法，通常需要调用API接口：

methods: {
  handleBatchDelete() {
    if (this.multipleSelection.length === 0) {
      this.$message.warning('请至少选择一项');
      return;
    }

    this.$confirm('确认删除选中项?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const ids = this.multipleSelection.map(item => item.id);
      // 调用API
      deleteItems(ids).then(res => {
        this.$message.success('删除成功');
        this.fetchData(); // 重新加载数据
        this.$refs.multipleTable.clearSelection(); // 清空选择
      });
    }).catch(() => {
      this.$message.info('已取消删除');
    });
  }
}

API接口示例

假设后端API接收ID数组进行批量删除：

vue element 实现批量删除

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

注意事项

确保row-key使用唯一标识字段
批量操作前做好数据校验
删除成功后更新表格数据并清空选择
添加适当的用户反馈（成功/失败提示）

完整组件示例

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

    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      row-key="id">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleBatchDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请至少选择一项');
        return;
      }

      this.$confirm('确认删除选中项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.multipleSelection.map(item => item.id);
        deleteItems(ids).then(res => {
          this.$message.success('删除成功');
          this.fetchData();
          this.$refs.multipleTable.clearSelection();
        });
      });
    },
    fetchData() {
      // 获取表格数据
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>