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变量作用域更轻松
Oct 25 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
jquery等待效果示例
May 01 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
node.js操作mysql简单实例
May 25 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
微信运维交互机器人的示例代码
Nov 12 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
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php把session写入数据库示例
2014/02/26 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
高级技校毕业生自荐信
2013/11/18 职场文书
应聘会计求职信
2014/06/11 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL