# vue使用element ui復選框事件 ``` <el-table ref="multipleTable"?:data="tableData" tooltip-effect="dark" style="width:?100%" stripe @selection-change="handleSelectionChange"> ``` ### 復選框選中事件 ： @selection-change="handleSelectionChange" :-: 邏輯處理 方法一：通過element 自帶的事件，循環數據，取出id，拼接id ``` //?批量刪除 batchDel()?{ if?(this.multipleSelection.length?>?0)?{ this.$confirm("此操作將永久刪除該文件,?是否繼續?",?"提示",?{ confirmButtonText:"確定", cancelButtonText:"取消", type:"warning",?}) .then(()? =>?{ //刪除的對象 let dto?=?{}; let ids?=?""; //選中的數據，循環 this.multipleSelection.forEach((el)? =>?{ //拼接id，使用逗號隔開 ids?+=?el.id?+?","; }); dto.ids?=?ids; //后端刪除接口 processInfoDel(dto) .then((res)?=>?{ this.$message({?message:"刪除成功",?type:"success"?}); //?刪除完數據之后清除勾選框 this.$refs.multipleTable.clearSelection(); //刪除完重新請求接口 this.getDataPage(); ?}) //請求失敗 ?.catch((err)?=>?{ console.log("刪除失敗"); ??}); ??}) .catch(()?=>?{ this.$message({ type:"info", message:"已取消刪除", ?}); ??}); ?}?else?{ this.$message({ message:"你還沒有選擇要刪除的數據", type:"warning", }); ?} ?}, ``` 方法二：通過引用直接獲取選中的值 selection ``` //監聽刪除事件 async delInfo()?{ //獲取選中的復選框的數據 var delData?=?this.$refs.multipleTable.selection; //?循環數據，取出id delData.forEach((val)?=>?{ //往刪除數據的數據里面添加id this.delIds.push(val.id); }); //將需要刪除的id轉成字符串 let ids?=?this.delIds.join(","); console.log(ids); //判斷是否選擇刪除的數據 if?(this.delIds.length?==?0)?{ return this.$message.warning("請選擇要刪除的數據"); ??????} //刪除詢問提示 const confirmtitle?=?awaitthis.$confirm( "此操作將永久刪除該數據,?是否繼續?", "提示", ????????{ confirmButtonText:"確定", cancelButtonText:"取消", type:"warning", ????????} ??).catch((error)?=>?{ return error; ?}); //?取消 if?(confirmtitle?!==?"confirm")?{ this.delIds?=?[ ]; //清除復選框選中 this.$refs.multipleTable.clearSelection(); returnthis.$message.info("取消刪除"); } //點擊確定，請求接口，刪除數據 await flowLzTypeDelete({?ids?}) ????????.then((res)?=>?{ //?console.log(res) this.$message.success("刪除成功"); ?????}) ?.catch((err)?=>?{ return err; ??}); //清空刪除的id數組 this.delIds?=?[ ]; //??清空復選框 this.$refs.multipleTable.clearSelection(); //重置表格 this.getType(); ????}, ```