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实现列表滚动的方法
Jul 30 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
Vue实现表格批量审核功能实例代码
May 28 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
论坛头像随机变换代码
2006/10/09 PHP
php代码优化及php相关问题总结
2006/10/09 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
php限制文件下载速度的代码
2015/10/20 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
django中的ajax组件教程详解
2018/10/18 PHP
jquery创建div 实现代码
2009/04/27 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python多进程间通信代码实例
2019/09/30 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
没编程基础可以学python吗
2020/06/17 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
场地使用证明模板
2014/10/25 职场文书
党员评议自我评价
2015/03/03 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
公司行政管理制度范本
2015/08/05 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS