vue+element实现批量删除功能的示例


Posted in Javascript onFebruary 28, 2018

今年开始学习vue+element实现后台开发,在实现批量删除功能时有2个小知识点记录在下:

1、如何实现单击行交替选中当前行的复选框,element官网的table实例中没有找到。——通过row-click和toggleRowSelection实现

2、如何获取选中行的值来实现批量删除。——通过selection-change实现

代码如下

html:

<div class="row mt30 pl15">
   <el-button type="warning" @click="delGroup" :disabled="this.sels.length === 0">批量删除</el-button><!--disabled值动态显示,默认为true,当选中复选框后值为false-->
  </div>
  <el-table :data="tableList" :fit="true" @row-click="handleCurrentChange" @selection-change="selsChange" ref="table">
   <el-table-column type="selection" width="55" reserve-selection=""></el-table-column>
   <el-table-column prop="id" label="ID" width="150" class-name="bg_blue"></el-table-column>
   <el-table-column prop="cpsProductId" label="商品ID" width="200"></el-table-column>
   <el-table-column prop="productName" label="商品名称" width="200" show-overflow-tooltip></el-table-column>
   <el-table-column label="图片" width="200">
    <template scope="data1">
     <img :src="data1.row.imgsrc" class="mt10 mb10">
    </template>
   </el-table-column>
   <el-table-column label="操作" align="center">
    <template scope="scope">
     <el-button type="primary" size="small" @click="onEditSku(scope.row.id)">编辑</el-button>
     <el-button size="small" @click="onDelProduct(scope.row.id)">删除</el-button>
    </template>
   </el-table-column>
  </el-table>

js:

<script> 
export default { 
 name: 'product', 
 mounted() { 
  this.onSearch() 
 }, 
 data() { 
  return { 
   sels: [],//选中的值显示 
   tableList: [], 
   total: 0, 
   start: 0, 
   size: 10 
  } 
 }, 
 methods: { 
  selsChange(sels) { 
   this.sels = sels 
  }, 
  delGroup() { 
   var ids = this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串,以逗号分隔 
  }, 
  handleCurrentChange(row, event, column) { 
   this.$refs.table.toggleRowSelection(row) 
  } 
 } 
} 
</script>

以上这篇vue+element实现批量删除功能的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记之数据类型
Jan 14 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 #Javascript
React 组件转 Vue 组件的命令写法
Feb 28 #Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 #Javascript
Vue中this.$router.push参数获取方法
Feb 27 #Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 #Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 #Javascript
angular json对象push到数组中的方法
Feb 27 #Javascript
You might like
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
PHP函数常用用法小结
2010/02/08 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
python语言是免费还是收费的?
2020/06/15 Python
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
扬尘污染防治方案
2014/06/15 职场文书
酒店辞职书范文
2015/02/26 职场文书
光荣之路观后感
2015/06/12 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
python中redis包操作数据库的教程
2022/04/19 Python
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android