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()
  })

• 对于大量数据删除应考虑分批次请求

• 后端需要验证权限和参数合法性

• 删除操作应记录日志以备审计

  

性能优化建议

• 使用虚拟滚动处理大量数据列表
• 添加删除进度指示
• 实现撤销删除功能
• 考虑软删除而非物理删除