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

Z时代
2024-01-10
分类：IT

本文实例为大家分享了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
          style="width: 100%;"
          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 style="float: left;">
          <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="[10,20,30, 50]"
                :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方法逻辑处理
        }
    }
}