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 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 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
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
jQuery事件用法详解
2016/10/06 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
JAVA软件工程师测试题
2014/07/25 面试题
电脑教师的自我评价
2013/12/18 职场文书
小学生读书感言
2014/02/12 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android