avue|Avue中实现多选删除功能 javascript|vue|前端|工作记录

Avue中实现多选删除功能前言在avue框架中，实现多选功能删除多项表单记录的功能。
实现效果如下：

文章图片

提示：以下是本篇文章正文内容，下面案例可供参考
一、前提条件 【avue|Avue中实现多选删除功能】后台写好根据记录行id进行删除数据行的接口，可以根据数组数据实现批量删除。
二、多选删除实现 1.引入库 Option属性：selection:true //开启多选功能

export const tableOption = { "border": true, "index": true, "indexLabel": "序号", "stripe": true, "menuAlign": "center", "align": "center", "searchMenuSpan": 6, "searchslot": true, selection:true,//开启多选功能 "column": [ { "type": "input", "label":"编码", "prop": "productNumber", "formslot":true, "search": true,//设置搜索项 "span": 12, }, { "type": "input", "label": "描述1", "prop": "desc1", "span": 12, }, { "type": "input", "label": "描述2", "prop": "desc2", "span": 12, }, { "type": "input", "label": "版本", "prop": "craftVerion", "span": 12 } ], }

index.vue中在 avue-crud 设置方法： @selection-change=“selectionChange”，
然后在组件中添加自定义 tip 插槽

//tip插槽

index.vue中的 methods对象中的方法

//删除多行 delSelection(){ if (this.ids.length !=0){//ids为之定义的数组属性值，在data()中定义 this.$confirm("是否确认删除选中的所有记录吗？", "提示", { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(()=> { return delObj([this.ids])//后端接口根据数组批量删除记录 }).then(data => { this.$message.success('删除成功') this.getList(this.page)//刷新数据 }) }else{ this.$message.error('未选中任何项') } },//选中的数据，每选中一次，执行一次 selectionChange(item){ this.ids = []//每次清空 item.forEach((items)=>{ this.ids.push(items.id) }) },

总结 1.多选删除方便管理数据
2.需要了解avue官网属性、方法的使用
3.巩固自身前端基础
4、如果你有疑问或者有更好的实现方法请留言，交流学习