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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
详解Node全局变量global模块
Sep 28 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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
Terran兵种介绍
2020/03/14 星际争霸
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
jquery编写日期选择器
2017/03/16 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python交互式图形编程的实现
2019/07/25 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
大型活动策划方案
2014/01/12 职场文书
小摄影师教学反思
2014/04/27 职场文书
个人求职自荐信范文
2014/06/20 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014年科协工作总结
2014/12/09 职场文书
MySQL之DML语言
2021/04/05 MySQL
详解Python魔法方法之描述符类
2021/05/26 Python
python常见的占位符总结及用法
2021/07/02 Python
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
服务器间如何实现文件共享
2022/05/20 Servers