前言:在管理系统中,除了删除单个记录的方法,那么为了简化操作,当要删除多个数据记录的时候就要就同时删除多条记录,就可以为系统添加批量删除的功能,本文使用vue+element-plus技术实现对数据的批量删除,重点是实现的逻辑
实现原理
1.首先我们点击批量删除按钮时,要判断是否有被选中要删除的记录,如果没有进行提示,
2.其次选中记录后点击批量删除,弹出批量删除对话框,点击取消,关闭对话框
3.最后点击确定,后端记录删除后,调用刷新页面的方法,实时刷新页面数据
演示代码及效果图
1点击批量删除代码
2.打开对话框操作,上图第72打开
批量删除逻辑代码(由于组件之间存在通信,所以删除代码使用pinia解决)
Pinia
总结
1.点击按钮,打开对话框,对话框上的确定按钮实现批量删除