springboot+vue实现批量删除功能

思路：前端传给后端的是long数组，后端返回json信息告知前端操作成功

前端：

HTML：

单个按钮调整位置通过style来控制

 <!-- 批量操作按钮 -->

        <el-button @click="deleteCertificateBatch()" v-permission="'certificate:delete'" type="primary" plain style="float:right">批量删除</el-button>

JS：

写在data() return中

multipleSelection: [] ,// 批量选择中选择的记录列表

methods:中

deleteCertificateBatch(){

        //批量删除

      this.$confirm("此操作将永久删除信息, 是否继续?", "提示", {

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning"

      }).then(() => {

        // 确定执行 then 方法

        var idList = [];

        // 遍历数组得到每个 id 值，设置到 idList 里面

        for (var i = 0; i < this.multipleSelection.length; i ) {

          var obj = this.multipleSelection[i];

          var id = obj.id;

          idList.push(id);

        }

        this.api({

            url: "/certificate/deleteCertificateBatch",

            method: "post",

            data: idList

            }).then(() => {

            this.$message.success('删除成功')

            this.getList()

            }).catch(() => {

            this.$message.error("删除失败")

            })

      });

      },

后端：

Controller层：

/**

 * 批量删除

 */

@RequiresPermissions("certificate:delete")

@PostMapping("deleteCertificateBatch")

public JSONObject deleteCertificateBatch(@RequestBody Long[]  id){

    return certificateService.deleteCertificateBatch(id);

}

Service层

/**

 * 批量删除

 */

@Transactional(rollbackFor = Exception.class)

public JSONObject deleteCertificateBatch(Long[] id) {

     certificateDao.deleteCertificateBatch(id);

     return CommonUtil.successJson();

}

Dao层

/**

 * 批量删除

 * @return

 */

Long deleteCertificateBatch(Long[] id);

Mapper：

<update id="deleteCertificateBatch" parameterType="Long">

    update  cert_info

    SET

        status = 0, deleted = b'1'

    where id in

    <foreach collection="array" item="id" open="(" separator="," close=")">

        #{id}

    </foreach>

</update>

中途遇到了一些问题，前端传了数组回来后端处理数组的同时要传JSON告知前端处理成功，所以在controller和service层要对格式进行转换，通过service的return CommonUtil.successJson();告知前端处理成功。

这篇好文章是转载于：学新通技术网