SpringBoot + Vue 微人事(十二)

职位批量删除实现

编写后端接口

PositionController

java 复制代码
 @DeleteMapping("/")
    public RespBean deletePositionByIds(Integer[] ids){
        if(positionsService.deletePositionsByIds(ids)==ids.length){
            return RespBean.ok("删除成功");
        }
        return RespBean.err("删除失败");
    }

PositionsService

java 复制代码
    public int deletePositionsByIds(Integer[] ids) {
        return positionMapper.deletePositionsByIds(ids);
    }

PositionMapper

java 复制代码
    int deletePositionsByIds(@Param("ids") Integer[] idsInteger[] ids);

PositionMapper.xml

xml 复制代码
  delete  from position where  id in
        <foreach collection="ids" item="id" separator="," open="(" close=")">
           #{id}
         </foreach>;

添加批量删除按钮

bash 复制代码
            <el-button type="danger" size="small" style="margin-top:10px" >批量删除</el-button>

没有选中肯定默认是禁用批量删除按钮的,添加一个

赋值就是当前选择的项

定义一个变量,空数组变量

bash 复制代码
   multipleSelection: []

添加一个点击事件,这个是一个点击多选框会触发的点击事件

赋值给这个空数组变量,保存着始终点击项

按钮禁用

bash 复制代码
            <el-button type="danger" size="small" style="margin-top:10px" :disabled="multipleSelection.length==0">批量删除</el-button>

给这个按钮添加一个点击事件,进行连接后端,批量删除

bash 复制代码
<el-button type="danger" size="small" style="margin-top:10px" :disabled="multipleSelection.length==0" @click="deleteMany">批量删除</el-button>
bash 复制代码
 deleteMany(){
                let ids ="?";
                this.multipleSelection.forEach(item=>{
                    ids += 'ids='+item.id+'&'   //ida = ?ids=  + id + &  ids=  + id + &
                })
                console.log(ids)
                this.deleteRequest("/system/basic/pos/"+ids).then(resp=>{
                    if (resp){
                        this.initPositions()
                    }
                })
            },
相关推荐
ai小鬼头2 小时前
Ollama+OpenWeb最新版0.42+0.3.35一键安装教程,轻松搞定AI模型部署
后端·架构·github
萧曵 丶3 小时前
Rust 所有权系统:深入浅出指南
开发语言·后端·rust
小七mod3 小时前
【MyBatis】MyBatis与Spring和Spring Boot整合原理
spring boot·spring·mybatis
猴哥源码3 小时前
基于Java+SpringBoot的动物领养平台
java·spring boot
老任与码3 小时前
Spring AI Alibaba(1)——基本使用
java·人工智能·后端·springaialibaba
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情4 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w9089258594 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
猴哥源码4 小时前
基于Java+SpringBoot的在线小说阅读平台
java·spring boot
星辰离彬4 小时前
Java 与 MySQL 性能优化:Java应用中MySQL慢SQL诊断与优化实战
java·后端·sql·mysql·性能优化