springboot+vue+mybtais 实现增删改查页面（三）实现批量删除，带分页 *** 作。vue前端页面，前后端分离项目

springboot+vue+mybtais 实现增删改查页面（三）实现批量删除，带分页 *** 作。vue前端页面，前后端分离项目

先来看前端怎么写

首先需要在每个表格的前面加上一个多选框，

data里加上

 multipleSelection:[],

逻辑script

  //删除多个
            deleteMany(){
                let ids = []
                this.$/confirm/i('此 *** 作将永久删除'+this.multipleSelection.length+'条流程,是否继续？','提示',{
                    /confirm/iButtonText:'确定',
                    cancelButtonText: '取消',
                    type:'warning'
                }).then(()=>{
                    // let ids='?';
                    this.multipleSelection.forEach(item =>{
                        ids.push(item.id)
                });
                    const _this = this
                    axios.get('http://localhost:8282/flow/delEmps/'+ids).then(function(resp){
                        _this.$alert('删除成功！', '消息', {
                            /confirm/iButtonText: '确定',
                            callback: action => {
                                window.location.reload()
                            }
                })

                    })
                })
            },
            删除多个
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val)
            },

前端完毕，'http://localhost:8282/flow/delEmps/'注意这里替换成自己的地址

后端springboot

dao层

  public int deleteByIds(Integer[] flowIds);//批量删除

sql语句

    
        delete from flowd where id in
        
            #{id}
        
    

service层

public int deleteByIds(Integer[] flowIds);//批量删除

实现类serviceimpl
@Override

  public int deleteByIds(Integer[] flowIds) {

        return flowMapper.deleteByIds(flowIds);

    }

controller层

 //批量删除
    @GetMapping("/delEmps/{ids}")
    @ResponseBody
    public String delEmp(@PathVariable("ids")  Integer[] ids){
        Integer result = flowService.deleteByIds(ids);
        if (result > 0) {
            return "success";
        } else {
            return "error";
        }
    }

完事结束，有需要的可以评论哈