vue+element的表格实现批量删除功能示例代码


Posted in Javascript onAugust 17, 2018

最近写了一个批量删除功能,遇到了不少坑,特此记录一下

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);
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
JavaScript函数详解
Feb 27 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
jQuery限制图片大小的方法
May 25 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 #Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 #Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 #Javascript
JavaScript实现构造json数组的方法分析
Aug 17 #Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 #Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 #Javascript
layer弹出层全屏及关闭方法
Aug 17 #Javascript
You might like
微信扫描二维码登录网站代码示例
2013/12/30 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python实现的爬虫功能代码
2017/06/24 Python
python 拼接文件路径的方法
2018/10/23 Python
Django时区详解
2019/07/24 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Python中的整除和取模实例
2020/06/03 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
单身联谊活动方案
2014/01/29 职场文书
借款担保书范文
2014/05/13 职场文书
优秀大学生自荐信
2014/06/09 职场文书
采购部长岗位职责
2014/06/13 职场文书
争先创优活动总结
2014/08/27 职场文书
门面房租房协议书
2014/12/01 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers