PHP小丑 发表于 2021-12-7 14:39:25

Java实现多选批量删除功能(vue+Element)

这篇文章主要为大家详细介绍了Java实现多选批量删除功能,包括前端vue实现代码文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Java实现多选批量删除功能的具体代码,供大家参考,具体内容如下
选择前效果图

选中效果图

前端vue代码
1、页面显示template
使用方法 @selection-change=“changeFun” 获取表中选中的行所有显示的数据

<template>
<div class="dept tab-container">
    <div class="dept-table">
      <div id="query" class="newTable">
      <!-- 列表数据展示-->
      <el-table
          :data="list"
          border
          fit
         
          v-loading="loading"
          element-loading-text="请给我点时间!"
          @selection-change="changeFun"
      >
          <el-table-column type="selection" width="55" v-model="checkBoxData"></el-table-column>
          <el-table-column align="center" label="姓名" min-width="60px">
            <template slot-scope="scope">
            <span>{{scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="记录类型" min-width="80px">
            <template slot-scope="scope">
            <span>{{getTypeName(scope.row.type)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="返回信息" min-width="180px">
            <template slot-scope="scope">
            <span>{{scope.row.message }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建人">
            <template slot-scope="scope">
            <span>{{scope.row.createUserId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" min-width="55px">
            <template slot-scope="scope">
            <span>{{parseTime(scope.row.createDateTime)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="最后修改人">
            <template slot-scope="scope">
            <span>{{scope.row.modifyUserId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="最后修改时间" min-width="55px">
            <template slot-scope="scope">
            <span>{{parseTime(scope.row.modifyDateTime)}}</span>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" min-width="100px" label="操作">
            <template slot-scope="scope">
            <el-button class="btn" size="mini" type="danger" @click="delHandle(scope.row.id)" v-if="isButtonShow("userDel")">删除</el-button>
            </template>
          </el-table-column>

      </el-table>

      <!-- 批量删除-->
      <br />
      <div>
          <el-button class="btn" size="mini" :disabled="btnChangeEnable" @click="delBatchHandle" type="danger">批量删除</el-button>
      </div>
      <br />

      <!--分页 begin-->
      <div class="pagination-container">
          <el-row>
            <el-col :span="19">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="listQuery.current"
                :page-sizes=""
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
            </el-col>
          </el-row>
      </div>
      <!--分页 end-->

      </div>
    </div>
</div>
</template>2、定义显示值

data(){
return{
   btnChangeEnable: true, // 批量删除禁用
   checkBoxData: [],    //多选框选择的值
}
}3、选中时触发方法
@selection-change=“changeFun”

// 获取多选框选中的值
changeFun(val) {
console.log(val)
this.checkBoxData = val;
if(val == ""){
   this.btnChangeEnable = true;
} else {
    this.btnChangeEnable = false;
}
},4、批量删除按钮绑定事件

<el-button class="btn" size="mini" :disabled="btnChangeEnable" @click="delBatchHandle" type="danger">批量删除</el-button>5、触发事件
导入 axios

import axios from "axios";
// 批量删除
delBatchHandle() {
    this.$confirm("确定要删除吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      // 解析checkBoxData中的id值,也可以解析其他包含的数据
      var ids = this.checkBoxData.map(item => item.id).join()//获取所有选中行的id组成的字符串,以逗号分隔
      console.log(ids)
      axios.post("/verityRecord/deleteBatch", { vrDatas: ids }).then((result) => {
      if (result.code == "0000") {
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          this.getList()
      } else {
          this.$message({
            type: "error",
            message: "操作失败!"
          })
      }
      })
    }).catch(() => {
      this.$message({
      type: "info",
      message: "已取消操作"
      })
    })
}后台接收并解析

/**
* 批量删除信息
* <p>
* author:
* @param paramsMap
* @return
*/
@RequestMapping(value = "/deleteBatch", method = RequestMethod.POST)
public void deleteBatch(@RequestBody Map<String, Object> paramsMap) {
    if (paramsMap != null && paramsMap.size() > 0) {
      String vrDatas = paramsMap.get("vrDatas").toString();
      String[] ids = vrDatas.split(",");
      for (String id : ids) {
            // 根据自己的service方法逻辑处理
      }
    }
}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持CodeAE代码之家。
原文链接:https://blog.csdn.net/u013526643/article/details/108401420

http://www.zzvips.com/article/209919.html
页: [1]
查看完整版本: Java实现多选批量删除功能(vue+Element)