單個刪除功能已經實現了，批量刪除弄了很久也沒弄好，來試一下。弄了很久終于把批量刪除實現了！
結果:


點擊確認后，將看見表中已經少了兩條數據。
實現的關鍵是：1.正確傳遞數據給后端的js語句
2.后端接收的方式，為json類型時需要進行解析
3.接收到的是一個字符串，可以轉為list類型，在sql語句中注意collection的參數要與自定義的類型相匹配
4.在dao接口中的參數要與xml中實際傳遞的參數匹配
5.前端設置一個多選框選項數組，每選中一個就把這個加入到數組中。
關鍵代碼：
js:

multipleSelection: [],deleteHandler(id) {this.$confirm("確定刪除題目嗎？刪除后無法恢復","Warning",{confirmButtonText: '確定刪除',cancelButtonText: '算了,留著吧',type: 'danger'}).then(()=> { //確認刪除this.$axios({url: `/deleteerror/${id}`,method: 'delete',}).then(res => {this.initJls();})}).catch(() => {})},deleteMany() {this.$confirm('此操作將永久刪除【' + this.multipleSelection.length+ '】條記錄, 是否繼續?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {let ids = '?';var nums = new Array();this.multipleSelection.forEach(item => {// ids += 'ids=' + item.id + '&';nums.push(item.id)})var wNums=nums.toString()console.log(wNums)this.$axios({url: `/deletemany`,method: 'post',data : {id:wNums},}).then(res => {this.initJls();})}).catch(() => {this.$message({type: 'info',message: '已取消刪除'});});},handleSelectionChange(val) {this.multipleSelection = val;}, //處理選中多選框

要注意這句:
data : {id:wNums},
發現當id為其他字符（如num)時，無法批量刪除自己增加的錯題，可能是因為這個id須與后端數據庫的id字段相同才能正確刪除。

elementui渲染：
（包含單個刪除部分）

<el-table-column type="selection" width="55"></el-table-column><el-table-column（這樣寫之后第一列會出現選擇框)label="操作" width="150"><template slot-scope="scope"><el-button size="small"@click="showEditView(scope.row.id)">編輯</el-button><el-button size="small" type="danger"@click="deleteHandler(scope.row.id)">刪除</el-button></template></el-table-column><el-button type="danger" size="small" style="margin-top: 10px":disabled="multipleSelection.length==0"@click="deleteMany">批量刪除</el-button>

java處理：
xml:

<delete id="delete" parameterType="java.lang.Integer">delete from errorbook where id=#{id}</delete><delete id="doRemoveeMore" parameterType="java.util.List"><!-- delete from emp where empno in(7789,7790) --><!-- forEach : 用來循環 collection : 用來指定循環的數據的類型 可以填的值有：array,list,map item: 循環中為每個循環的數據指定一個別名 index : 循環中循環的下標 open : 開始 close : 結束 separator : 數組中元素之間的分隔符 -->delete from errorbookwhere id in<foreach collection="list" item="item" index="index" open="(" close=")" separator=",">#{item}</foreach></delete>

接口:

public int delete(Integer id);public boolean doRemoveeMore(List<String> arr);

controller:

@DeleteMapping("/deleteerror/{id}")public String deleteUser( @PathVariable("id")Integer id){System.out.println(id);int i = errorBookDao.delete(id);String str = i >0?"success":"error";return str;}@PostMapping("/deletemany")public boolean deletebatch(@RequestBody String nums) {System.out.println(nums);Map<String, Object> jsonMap = JSON.parseObject(nums);System.out.println(jsonMap.get("id"));//class m =jsonMap.get("id").getClass();// System.out.println(object.getJSONObject("id"));// int wNums = errorBook.getId();String[] ns=jsonMap.get("id").toString().split(",");List<String> wNums=new ArrayList<String>();for(int i=0;i<ns.length;i++){wNums.add(ns[i]);} // System.out.println(wNums);boolean doremove=errorBookDao.doRemoveeMore(wNums);return true;}

bean層:

public class ErrorBook {private Integer id;//private String datee;private String content;private String answer;private String reason;private String master;private String subject;}//省略了getter setter

總結

以上是生活随笔為你收集整理的【项目实战】mybatis +vue.js 前后端交互批量删除的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。