Java實現(xiàn)多選批量刪除功能(vue+Element)

更新時間：2021年09月10日 11:42:27 作者：Explorer_S

這篇文章主要為大家詳細介紹了Java實現(xiàn)多選批量刪除功能，包括前端vue實現(xiàn)代碼文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Java實現(xiàn)多選批量刪除功能的具體代碼，供大家參考，具體內(nèi)容如下

選擇前效果圖

選中效果圖

前端vue代碼

1、頁面顯示template

使用方法 @selection-change=“changeFun” 獲取表中選中的行所有顯示的數(shù)據(jù)

<template>
  <div class="dept tab-container">
    <div class="dept-table">
      <div id="query" class="newTable">
        <!-- 列表數(shù)據(jù)展示-->
        <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="創(chuàng)建人">
            <template slot-scope="scope">
              <span>{{scope.row.createUserId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="創(chuàng)建時間" 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、選中時觸發(fā)方法

@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、觸發(fā)事件

導入 axios

import axios from 'axios';

// 批量刪除
delBatchHandle() {
    this.$confirm('確定要刪除嗎?', '提示', {
      confirmButtonText: '確定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 解析checkBoxData中的id值，也可以解析其他包含的數(shù)據(jù)
      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) {
            // 根據(jù)自己的service方法邏輯處理
        }
    }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Java 什么是注解及注解原理詳細介紹
這篇文章主要介紹了Java 注解的原理實例詳解的相關資料,需要的朋友可以參考下
2016-12-12
springmvc多事務提交和回滾問題
本文介紹了Spring MVC中如何配置和使用多事務管理及回滾,重點內(nèi)容包括配置jdbc.properties文件,使用Spring Framework 5.3版本新增的CompositeTransactionManager,以及如何在相關方法上添加@Transactional注解
2024-09-09
Java后端請求接收多個對象入?yún)⒌臄?shù)據(jù)方法(推薦)
本文介紹了如何使用SpringBoot框架接收多個對象作為HTTP請求的入?yún)?通過創(chuàng)建數(shù)據(jù)模型、DTO類和Controller,我們可以輕松處理復雜的請求數(shù)據(jù)
2024-11-11
java定時調(diào)度器(Quartz)使用實例
這篇文章主要介紹了java開源定時調(diào)度器使用方法
2013-12-12
Java如何分析算法的時間和空間復雜度
這篇文章主要介紹了Java如何分析算法的時間和空間復雜度，在計算機科學中，計算復雜性解釋了算法的性能。文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-06-06
SpringBoot啟動失敗的解決方法：A component required a&nb
這篇文章主要介紹了解決SpringBoot啟動失敗：A component required a bean of type ‘xxxxxxx‘ that could not be found.,目前解決方法有兩種，一種是不注入bean的方式，另一種是使用@Component的方式，本文給大家詳細講解，需要的朋友可以參考下
2023-02-02
Swagger注解-@ApiModel和@ApiModelProperty的用法
這篇文章主要介紹了Swagger注解-@ApiModel和@ApiModelProperty的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
Java之SSM中bean相關知識匯總案例講解
這篇文章主要介紹了Java之SSM中bean相關知識匯總案例講解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
2021-07-07
解決springboot整合cxf啟動報錯,原因是版本問題
這篇文章主要介紹了解決springboot整合cxf啟動報錯,原因是版本問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-07-07
spring?data?jpa如何使用自定義repository實現(xiàn)類
這篇文章主要介紹了spring?data?jpa如何使用自定義repository實現(xiàn)類，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-11-11