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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
Javascript 面向对象 继承
May 13 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
node使用request请求的方法
Dec 20 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php 过滤危险html代码
2009/06/29 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
iframe实用操作锦集
2014/04/22 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Python中的getopt函数使用详解
2015/07/28 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
解决Django中多条件查询的问题
2019/07/18 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
运动会稿件50字
2014/02/17 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
开学第一周总结
2015/07/16 职场文书
新课程改革心得体会
2016/01/22 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript