vue+element的表格实现批量删除功能示例代码
时间:2018-08-17
这篇文章主要介绍了vue+element的表格实现批量删除功能示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
最近写了一个批量删除功能,遇到了不少坑,特此记录一下
表格的代码如下
复制代码 代码如下:
<el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" stripe :default-sort="{prop: 'createAt', order: 'descending'}" @sort-change="sortChange">
如图所示,表格最前面有一个复选框
代码很简单
<el-table-column type="selection" width="65"></el-table-column>
删除按钮的代码如下:
复制代码 代码如下:
<el-button v-show="mode == 'list'" class="small" type="warning" size="small" @click="removeBatch(sels)" :disabled="this.sels.length === 0||this.disabled">批量删除</el-button>
data的代码如下:
data() { return { pageSize: 12, total: 0, pageData: [], query: '', sort: 'createAt', order: 'descending', defaultSnap: srcFallback, accept: '', ws: null, sels: [],//选中显示的值 disabled:true }; }
表格中的视频数据来自于pageData,每个视频都是一个对象,对象的status属性等于waiting或者有progress属性时,此视频正在转码,或者正在准备转码,不允许删除, 批量删除就是把被选中的行添加到sels这个数组中,把数组里的每一个对象的id属性组成一个数组,发送给后端,此外,正在转码的视频不允许删除,此时按钮也是禁用状态
根据官方文档,@selection-change="selsChange"
是复选框选择改变时触发的事件
在methods中添加一个方法
selsChange(sels) { //被选中的行组成数组 this.sels = sels; //遍历被选中行数所组成的数组 for(let element of this.sels){ //如果视频正在转码或者等待转码,禁用按钮,结束方法 if(element.status == 'waiting'||element.progress){ this.disabled = true; return; } //如果没有视频正在转码或者等待转码,按钮可用 this.disabled = false; } }
把请求发送给后端,代码如下:
removeBatch(rows){ var ids = []; rows.forEach(element =>{ ids.push(element.id) }) this.$confirm('确定要删除选中的文件吗?','提示').then(() =>{ $.post('/vod/removeBatch',{ ids:ids }).then(dara =>{ this.updateData(); }) }).catch(()=>{}); }
前端已经排除正在转码的视频了,后端是否能根据前端传来的数据,直接删除视频呢?
答案是不可以,后端一样要做验证
思路是,拿到前端传来的数据后,遍历数组两次,第一次如果发现有正在转码的视频,抛出异常,不会进入第二次循环,第二次循环才根据id删除视频
代码如下
r.post('/removeBatch',async(req,res) => { var ids = req.body.ids; var files = utils.vod.get("files"); //第一次循环,如果有正在转码的文件,就抛出异常,结束循环 for(let id of ids){ var transing = trans.agent.transing[id]; if(transing){ throw new Error('正在转码的文件无法删除'); return; } } //如果没有转码的文件,进入第二次循环 for(let id of ids){ var files = utils.vod.get("files"); var row = files.find({id: id}).cloneDeep().value(); //如果没有要删除的,就结束 if(!row) { res.sendStatus(200); return; } var dir = path.dirname(row.path); var name = path.basename(row.path, path.extname(row.path)); var transDir = path.resolve(dir, name); //删除源文件 if(fs.existsSync(row.path)){ fs.removeSync(row.path); } //删除转码文件 if(fs.existsSync(transDir)){ fs.removeSync(transDir); } //删除json文件记录 files.remove({id: id}).write(); } res.sendStatus(200); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- R语言中的非线性分类
- 用SPSS做数据分析?先弄懂SPSS的基础知识吧
- 学习笔记CB001:NLTK库、语料库、词概率、双连词、词典
- 时序列数据库武斗大会之 OpenTSDB 篇
- 应当使用 SQLite 的五个原因
- Apache Spark作为编译器:深入介绍新的Tungsten执行引擎
- DC/OS 的安装与部署
- Go语言实践:从新手入门到上线真实的小型服务所遇到的那些坑
- 4个简单的数据管理技巧
- MongoDB的设计模式策略
- 如何用容器实现生产级Redis sharding集群一键交付
- Hadoop旧mapreduce的map任务切分原理
- 解读Neo4j全新的Python驱动程序
- MySQL 5.7 X Plugin:流水线技术vs.并行查询技术
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kotlin中常见的符号详解
- Kotlin中实体类的创建方式
- Android自定义流式布局/自动换行布局实例
- Android 中 MD5 的几种生成方式(小结)
- Flutter 日期时间DatePicker控件及国际化
- 解决Kotlin 类在实现多个接口,覆写多个接口中相同方法冲突的问题
- Kotlin 匿名类实现接口和抽象类的区别详解
- android实现微信朋友圈发布动态功能
- 基于Android studio3.6的JNI教程之helloworld思路详解
- 基于Android studio3.6的JNI教程之opencv实例详解
- AndroidStudio代码达到指定字符长度时自动换行实例
- android studio 新建项目报错的解决之路
- Android Studio 3.6中使用视图绑定替代 findViewById的方法
- Android 使用View Binding的方法详解
- CentOS一键安装Resilio Sync脚本