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 插槽

<avue-crud ref="crud":page.sync="page":data="tableData":table-loading="tableLoading":option="tableOption"@on-load="getList"@selection-change="selectionChange">//tip插槽      <template slot="tip" slot-scope="scope" ><el-button type="text" @click="delSelection">删除选中行</el-button></template>
<avue-crue>

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、如果你有疑问或者有更好的实现方法请留言，交流学习

Avue中实现多选删除功能相关推荐

【凯子哥带你夯实应用层】使用ActionMode实现有删除动画的多选删除功能
转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 ActionMode是3.0之后,官方推荐的一种上下文菜单的实现方式,在之前一直用的是Context Men ...
php多选怎么实现,php怎么实现多选删除功能
php实现多选删除的方法:首先创建好前台checkbox多选内容的文件:然后通过implode函数把数组元素组合为一个字符串:最后使用SQL语句实现删除即可. 推荐:<PHP视频教程> p ...
element中checkbox全选反选功能
单循环: <el-button @click="handleLimit(scope.row)"type="warning"icon="el-ic ...
android的listview多选功能,Android ListView实现单选及多选等功能示例
本文实例讲述了Android ListView实现单选及多选等功能的方法.分享给大家供大家参考,具体如下: 在项目中也遇到过给ListView的item添加选择功能.比如一个网购APP,有个历史浏览页 ...
android gridview item添加checkbox,手把手教你实现GridView中Checkbox全选
全选效果图这节讲得相对比较基础的东西,高手请忽略. 首先新建一个GridviewAdapter继承BaseAdapter public class GridviewAdapter extends B ...
php实现复选框删除功能,php怎么实现复选框批量删除
php实现复选框批量删除的方法:首先连接数据库并获取一张表:然后创建一个form表单并定义一个复选框:接着添加一个批量删除按钮:最后创建删除的PHP处理页面即可. 本文操作环境:Windows7系统. ...
Mac OS开发—Xcode给Mac应用添加编辑快捷键(剪切复制粘贴全选删除撤销重做)功能
前言笔者做Windows开发的,无奈公司有Mac OS的项目需要维护,之前没有编辑菜单的功能,需要笔者加上这个功能,笔者只能硬着头皮上.还好会c++,Mac应用里面一般都会用object-c 也可以 ...
java复选框批量删除_vue+element+Java实现批量删除功能
表格的主要代码段主要方法是: @selection-change="selschange //复选框 //id 定义显示值 data(){ return{ sels: [],//选中的值显 ...
ECS6基础-案例：百度音乐全选、添加、收藏、删除功能
百度音乐案例同上篇文章类似,都基于ECS6基础知识,重点在于掌握逻辑语法,css样式等不做过多追求 1. 实现功能添加音乐到列表选中效果删除所选音乐收藏和取消收藏全选功能和全不选功能实现 ...

Avue中实现多选删除功能

Avue中实现多选删除功能

前言

一、前提条件

二、多选删除实现

1.引入库

总结

Avue中实现多选删除功能相关推荐

最新文章

热门文章