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 相关文章推荐
理解AngularJs指令
Dec 10 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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自动适应范围的分页代码
2008/08/05 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
使用python编写监听端
2018/04/12 Python
python 以16进制打印输出的方法
2018/07/09 Python
python实现词法分析器
2019/01/31 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Python短信轰炸的代码
2020/03/25 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
super()与this()的区别
2016/01/17 面试题
团支书的期末学习总结自我评价
2013/11/01 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL
Python使用DFA算法过滤内容敏感词
2022/04/22 Python