做网站的去那里接单,网页设计模板怎么套用,家如何网站,保安做网站目录 前言1. 公共逻辑2. 单个删除3. 批量删除 前言
由于近期慢慢转全栈#xff0c;后续会以前后端的形式讲解
对应的Avue相关知识推荐阅读#xff1a;【vue】avue-crud表单属性配置#xff08;表格以及列#xff09;对应后端知识推荐阅读#xff1a;java框架 零基础从入… 目录 前言1. 公共逻辑2. 单个删除3. 批量删除 前言
由于近期慢慢转全栈后续会以前后端的形式讲解
对应的Avue相关知识推荐阅读【vue】avue-crud表单属性配置表格以及列对应后端知识推荐阅读java框架 零基础从入门到精通的学习路线 附开源项目面经等超全
对于单个删除的功能比较好删除如果多选的形式删除需要获取多个id列表对应在后端进行删除
在讲述批量删前先补充单一的删除逻辑
1. 公共逻辑
前端对应的逻辑如下
avue-crud :optionoption:table-loadingloading:datadata:pagepage:permissionpermissionList:before-openbeforeOpenv-modelformrefcrudrow-updaterowUpdaterow-saverowSaverow-delrowDelsearch-changesearchChangesearch-resetsearchResetselection-changeselectionChangecurrent-changecurrentChangesize-changesizeChangerefresh-changerefreshChangeon-loadonLoadcurrent-row-changehandleCurrentRowChangerow-clickhandleRowClick
template slotmenuLeftel-button typedangersizesmalliconel-icon-deleteplainclickhandleDelete删 除/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();});
},
