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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
JavaScript严格模式详解
Nov 18 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 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
关于文本留言本的分页代码
2006/10/09 PHP
一个简易需要注册的留言版程序
2006/10/09 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
聊聊Python中的pypy
2018/01/12 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
阿里旅行:飞猪
2017/01/05 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
大一新生军训时的自我评价分享
2013/12/05 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
护理中职生求职信范文
2014/02/24 职场文书
活动总结范文
2014/08/30 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
停电调休通知
2015/04/16 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers
SpringBoot详解执行过程
2022/07/15 Java/Android