# 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();     }, ```