vue实现批量删除
实现批量删除功能
在Vue中实现批量删除功能通常需要结合前端界面和后端API交互。以下是一个常见的实现方案：
数据准备与界面交互
创建数据列表和选中状态管理
data() {
return {
items: [], // 从API获取的数据列表
selectedItems: [], // 存储选中的项
loading: false
}
}在表格中添加多选列
<el-table
:data="items"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<!-- 其他列 -->
</el-table>处理选中项变化
methods: {
handleSelectionChange(val) {
this.selectedItems = val
}
}批量删除方法实现
async handleBatchDelete() {
if (this.selectedItems.length === 0) {
this.$message.warning('请至少选择一项')
return
}
try {
this.loading = true
const ids = this.selectedItems.map(item => item.id)
await api.batchDelete({ ids }) // 调用API
this.$message.success('删除成功')
this.fetchData() // 重新获取数据
this.selectedItems = [] // 清空选中
} catch (error) {
console.error(error)
} finally {
this.loading = false
}
}后端API接口示例
Node.js Express示例
router.delete('/batch', async (req, res) => {
try {
const { ids } = req.body
await Model.deleteMany({ _id: { $in: ids } })
res.json({ success: true })
} catch (error) {
res.status(500).json({ error: error.message })
}
})注意事项
-
前端应添加确认对话框防止误操作
this.$confirm('确定删除所选项目?', '提示', { type: 'warning' }).then(() => { this.handleBatchDelete() }) -
对于大量数据删除应考虑分批次请求
-
后端需要验证权限和参数合法性
-
删除操作应记录日志以备审计
性能优化建议
- 使用虚拟滚动处理大量数据列表
- 添加删除进度指示
- 实现撤销删除功能
- 考虑软删除而非物理删除
