前言

由于近期慢慢转全栈，后续会以前后端的形式讲解

1. 对应的Avue相关知识推荐阅读：【vue】avue-crud表单属性配置（表格以及列）
2. 对应后端知识推荐阅读：java框架 零基础从入门到精通的学习路线 附开源项目面经等（超全）

对于单个删除的功能比较好删除，如果多选的形式删除需要获取多个id列表，对应在后端进行删除

在讲述批量删前，先补充单一的删除逻辑

1. 公共逻辑

前端对应的逻辑如下：

<avue-crud :option="option":table-loading="loading":data="data":page="page":permission="permissionList":before-open="beforeOpen"v-model="form"ref="crud"@row-update="rowUpdate"@row-save="rowSave"@row-del="rowDel"@search-change="searchChange"@search-reset="searchReset"@selection-change="selectionChange"@current-change="currentChange"@size-change="sizeChange"@refresh-change="refreshChange"@on-load="onLoad"@current-row-change="handleCurrentRowChange"@row-click="handleRowClick"
><template slot="menuLeft"><el-button type="danger"size="small"icon="el-icon-delete"plain@click="handleDelete">删 除</el-button></template></avue-crud>

对于单个删除或者批量删除，接口也可做成一样的

export const remove = (ids) => {return request({url: '/api/xxx/yyy/remove',method: 'post',params: {ids,}})
}

后端的接口如下：

@PostMapping("/remove")
@ApiOperationSupport(order = 7)
@ApiOperation(value = "逻辑删除", notes = "传入ids")
public R remove(@ApiParam(value = "主键集合", required = true) @RequestParam String ids) {return R.status(tyreRepareOrderService.deleteLogic(Func.toLongList(ids)));
}

对于Func工具类，内部其实是Arrays.asList(toLongArray(str));

2. 单个删除

对应前端界面的method逻辑方法：

handleDelete() {if (this.currentRow== null) {this.$message.warning("请选择一条数据");return;}this.$confirm("确定将选择数据删除?", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {return remove(this.currentRow.id);}).then(() => {this.onLoad(this.page);this.$message({type: "success",message: "操作成功!"});// this.$refs.crud.toggleSelection();});
},

3. 批量删除

与单个删除不同的点在于需要有按钮框选择！

// 新增的按钮选项
option: {menu:true,align:'center',stripe:true,tip: false,border: true,index: false,viewBtn: false,highlightCurrentRow:true,searchShow:false,selection:true, searchMenuSpan: 6,calcHeight: 30,height:'auto',addBtn:true,delBtn:true,column: [{

只需要将selection改为true即可

对应的前端逻辑如下：（主要参照逻辑）

computed: {// 批量ids ，为了删除等操作ids() {let ids = [];this.selectionList.forEach(ele => {ids.push(ele.id);});return ids.join(",");},newModel(){return this.formInline.model;}},

对应删除的方法如下：

handleDelete() {if (this.selectionList.length === 0) {this.$message.warning("请选择至少一条数据");return;}this.$confirm("确定将选择数据删除?", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {return remove(this.ids);}).then(() => {this.onLoad(this.page);this.$message({type: "success",message: "操作成功!"});// this.$refs.crud.toggleSelection();});
},