vue前端实现批量删除
实现思路
在Vue中实现批量删除功能通常需要结合表格组件、多选操作和API调用。核心逻辑包括获取选中项ID数组，发送批量删除请求，并更新本地数据。
基础代码结构
假设使用Element UI的表格组件，以下为关键代码示例：
<template>
<div>
<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" :disabled="!selectedItems.length">批量删除</el-button>
</div>
</template>核心实现步骤
数据准备与选中处理
data() {
return {
tableData: [], // 表格数据
selectedItems: [] // 选中项数组
}
},
methods: {
handleSelectionChange(val) {
this.selectedItems = val
}
}批量删除方法
methods: {
async batchDelete() {
const ids = this.selectedItems.map(item => item.id)
try {
await this.$api.deleteItems(ids) // 假设的API调用
this.$message.success('删除成功')
this.refreshTable()
this.$refs.multipleTable.clearSelection() // 清空选中状态
} catch (error) {
this.$message.error('删除失败')
}
},
refreshTable() {
// 重新获取表格数据
}
}优化方案
添加确认对话框
async batchDelete() {
try {
await this.$confirm('确认删除选中项?', '提示', { type: 'warning' })
// 后续删除逻辑...
} catch {
return // 用户取消操作
}
}API请求封装示例
// API文件
export const deleteItems = (ids) => {
return axios.delete('/api/items', { data: { ids } })
}注意事项
- 后端接口需要支持接收ID数组进行批量删除
- 对于大量数据删除应考虑分批次请求
- 删除后需要正确处理本地数据更新
- 网络错误和空选状态需要做防御性处理
扩展功能
- 添加全选/反选功能
- 删除时显示加载状态
- 支持Undo操作恢复误删
- 添加删除成功后的回调函数
以上实现可以根据具体项目需求调整，核心逻辑是通过维护选中项数组，将ID集合提交给后端接口处理。
