vue实现批量删除
实现思路
在Vue中实现批量删除功能通常需要以下核心逻辑：通过复选框或全选按钮选择多条数据，将选中数据的ID收集到数组中，调用接口提交删除请求。
前端代码实现
模板部分（Vue 2示例）
<template>
<div>
<table>
<thead>
<tr>
<th><input type="checkbox" v-model="selectAll" @change="handleSelectAll"></th>
<th>ID</th>
<th>名称</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td><input type="checkbox" v-model="selectedIds" :value="item.id"></td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
<button @click="batchDelete">批量删除</button>
</div>
</template>脚本部分
<script>
export default {
data() {
return {
list: [
{ id: 1, name: '项目1' },
{ id: 2, name: '项目2' }
],
selectedIds: [],
selectAll: false
}
},
methods: {
handleSelectAll() {
this.selectedIds = this.selectAll ? this.list.map(item => item.id) : []
},
async batchDelete() {
if (this.selectedIds.length === 0) {
alert('请选择要删除的项目')
return
}
try {
await this.$http.post('/api/delete/batch', { ids: this.selectedIds })
this.list = this.list.filter(item => !this.selectedIds.includes(item.id))
this.selectedIds = []
this.selectAll = false
alert('删除成功')
} catch (error) {
console.error('删除失败:', error)
}
}
}
}
</script>后端接口建议
后端应接收ID数组并执行批量删除操作。以Node.js Express为例：
router.post('/api/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 })
}
})注意事项
- 删除前应添加确认对话框防止误操作
- 对于大量数据应考虑分页处理
- 接口需要做好权限验证
- 删除操作建议使用软删除而非物理删除
优化方案
-
添加加载状态防止重复提交
data() { return { loading: false } }, methods: { async batchDelete() { if (this.loading) return this.loading = true // ...原有逻辑 this.loading = false } } -
使用Element UI等组件库优化UI
<el-table :data="list" @selection-change="handleSelectionChange"> <el-table-column type="selection"></el-table-column> <!-- 其他列 --> </el-table>
