Element实现表格分页数据选择+全选所有完善批量操作


Posted in Javascript onJune 07, 2019

后台管理系统中的列表页面,一般都会有对列表数据进行批量操作的功能,例如:批量删除、批量删除等。

之前项目中只是简单的用到Element框架中常规的属性、事件。在一次机缘巧合下,了解到一个公司内部的框架是基于Element框架内部实现了一些插件功能,对于表格这一块完善了很多功能,当时没有把握住机会去看源码是怎么实现的,现在有点小后悔呢,嘤嘤嘤~~~~没关系,自己慢慢一点一点实现。

实现的功能有:

  • 分页数据选择 
  • 全选所有数据(不是element框架自带的全选本页哦!)

1、分页数据选择

一开始以为不就是分页的时候把之前选中的数据存储在一个list里面嘛,然后选择的时候map一下。等到自己写代码的时候,会发现没有那么简单,百度后,发现有两个属性被忽视了

  •  row-key  
  • reserve-selection

Element实现表格分页数据选择+全选所有完善批量操作

Element实现表格分页数据选择+全选所有完善批量操作

代码截图:

Element实现表格分页数据选择+全选所有完善批量操作

事件代码:

getRowKeys (row) {
 return row.execId
}

这样通过 selectionChange 方法就能获取页面中选中数据的改变,将选中的数据保存到list中

selectionChange (rows) {
 this.checkList = rows
}

2、全选所有数据

element框架中有select-all事件,全选本页所有数据,但是项目中,经常会遇到说对所有的进行操作,例如批量删除(删除所有数据,这个权限有点大)

实现思路:

  • 一个全选所有复选框,当选中时,前端传递一个参数Flag:1给后台,后台就会知道这是对所有数据进行操作,同时前后台之间都不用进行庞大的数据传输 
<el-checkbox v-model="allCheck" @change="allCheckEvent">全选所有</el-checkbox>
  • 选中全选所有复选框,当前页数据需全部是选中状态,翻页到另一页,这一页的数据也是全部选中状态 (监听当前页中数据)
allCheckEvent () {
 if (this.allCheck) {
 this.testList.forEach(row => {
 this.$refs.recordTable.toggleRowSelection(row, true)
 })
 } else {
 this.$refs.recordTable.clearSelection()
 }
}
watch: {
 testList: {
 handler (value) {
 if (this.allCheck) {
 let that = this
 let len = that.checkList.length
 value.forEach(row => {
  for (let i = 0; i < len; i++) {
  if (row.execId === that.checkList[i].execId) {
  that.$refs.recordTable.toggleRowSelection(row, false)
  break
  } else {
  that.$refs.recordTable.toggleRowSelection(row, true)
  }
  }
 })
 }
 },
 deep: true
 }
}
  • 选中全选所有复选框,同时,已经翻页了两页,选中的数据是两页数据,若取消其中一行数据的选中状态,此时,全选所有取消,当前选中的数据应是:已翻页的两页数据-取消的那一行数据
selectOne () {
 if (this.allCheck) {
 this.allCheck = false
 }
}

实现的表格:

Element实现表格分页数据选择+全选所有完善批量操作

走了不少弯路才注意到的问题:

  • 若从第一页翻选到第二页,然后又回到第一页,选中的数据理应是1+2两页的数据,现实是1+2+1这三页数据,在展现形式上是看不出来问题,而且前面说了,全选所有的时候,我向后台传的参数只是一个flag,而不是这些选中数据。但是若在第一页取消一行数据,此时全选所有数据框已取消,本条数据也不是选中状态,翻到第二页,在回到第二页,Duang~那条数据又回到了选中状态!因为选中数据中该条数据是两条啊,你取消了一个,另一个还在呀,当然你再取消一次,再回来,是取消状态,bug,bug,bug!
  • 想到的就是数据要去重,首先想到的是从结果去重,在selectionChange方法中去重,悲剧了,根本不起作用,理清思路后发现:当选择项发生改变时,调用selectionChange方法获取选中的所有数据,此时我们用forEach遍历数据,用toggleRowSelection方法将页面中的数据选中,此时toggleRowSelection一次,selectionChange方法执行一次 那就在监听数据时,如果数据ID相同,不在执行toggleRowSelection方法

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 #Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 #Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 #Javascript
Vue中实现权限控制的方法示例
Jun 07 #Javascript
vue 父组件中调用子组件函数的方法
Jun 06 #Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 #Javascript
小试小程序云开发(小结)
Jun 06 #Javascript
You might like
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
js字符串转成JSON
2013/11/07 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
python实现简单温度转换的方法
2015/03/13 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python调用支付宝支付接口流程
2019/08/15 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Python属性和内建属性实例解析
2020/01/14 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
农村婚庆司仪主持词
2014/03/15 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
就业协议书怎么填
2014/09/15 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
简爱电影观后感
2015/06/10 职场文书