当前位置：首页 > VUE

vue实现批量删除

2026-01-14 08:10:21VUE

实现批量删除功能

在Vue中实现批量删除通常需要结合表格多选功能和API调用。以下是一个完整的实现方案：

表格多选功能实现

使用Element UI的表格组件实现多选功能：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    ref="multipleTable"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 其他列 -->
  </el-table>
  <el-button @click="batchDelete">批量删除</el-button>
</template>

处理选中项

在methods中定义选择变化处理函数：

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

批量删除方法实现

实现批量删除的核心方法：

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

    const ids = this.multipleSelection.map(item => item.id)
    this.$confirm('确认删除选中的项吗?', '提示', {
      type: 'warning'
    }).then(() => {
      this.$api.deleteItems(ids).then(res => {
        this.$message.success('删除成功')
        this.getTableData() // 重新获取数据
      })
    })
  }
}

API调用示例

在api.js中定义删除接口：

export function deleteItems(ids) {
  return request({
    url: '/items',
    method: 'delete',
    data: { ids }
  })
}

注意事项

后端接口需要支持接收数组形式的ID进行批量删除
删除成功后需要刷新表格数据
添加适当的用户提示和确认对话框
考虑添加加载状态防止重复提交

完整组件示例

<template>
  <div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
      v-loading="loading"
    >
      <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" 
      @click="batchDelete"
      :disabled="multipleSelection.length === 0"
    >
      批量删除({{ multipleSelection.length }})
    </el-button>
  </div>
</template>

<script>
import { deleteItems, getItems } from '@/api'

export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      loading: false
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getTableData() {
      this.loading = true
      getItems().then(res => {
        this.tableData = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    batchDelete() {
      this.$confirm('确认删除选中的项吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const ids = this.multipleSelection.map(item => item.id)
        deleteItems(ids).then(() => {
          this.$message.success('删除成功')
          this.getTableData()
        })
      })
    }
  }
}
</script>

vue实现批量删除