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

本文链接：https://blog.csdn.net/unique_sir/article/details/122291756

在这里插入图片描述

先来看前端怎么写

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

 <el-table-column
                type="selection"
                width="55">
        </el-table-column>

data里加上

 multipleSelection:[],

逻辑script

  //删除多个
            deleteMany(){
                let ids = []
                this.$confirm('此操作将永久删除'+this.multipleSelection.length+'条流程,是否继续？','提示',{
                    confirmButtonText:'确定',
                    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('删除成功！', '消息', {
                            confirmButtonText: '确定',
                            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 id="deleteByIds" parameterType="Integer">
        delete from flowd where id in
        <foreach collection="flowIds" item="id" open="(" separator="," close=")">
            #{id}
        </foreach>
    </delete>

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";
        }
    }