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
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 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
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python str字符串转uuid实例
2020/03/03 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
一些Solaris面试题
2015/12/22 面试题
体育教学随笔感言
2014/02/24 职场文书
三方合作协议书范本
2014/04/18 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers