列表多选批删

列表多选批删

1.前端列表加多选框

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
  <el-table-column
      type="selection"
      width="55">
  </el-table-column>
  <el-table-column
      prop="roleId"
      label="角色id"
      width="180">
  </el-table-column>

2.data加multipleSelection

multipleSelection:[]

3.前端选中改变方法

/*
获取选中的值
 */
handleSelectionChange(val) {
  this.multipleSelection=val
},

4.前端点击批删按钮调的方法

/*
批删按钮
 */
delall(){
  let s = this.multipleSelection.map(res=>res.roleId).join();
  this.axios.post("role/delall?roleId="+s).then(r=>{
    this.$message.success("删除成功")
    this.getroleList()
  })
},

5.后端批删方法

/**
 * 批删
 * @return
 */
@PostMapping("delall")
public R delall(String roleId){
    String[] split = roleId.split(",");
    for (String s : split) {
        sysRoleService.deleteObjectById(s);
    }
    return R.successed(null);
}