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 相关文章推荐
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
JavaScript小技巧整理
Dec 30 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
详解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/06/05 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php数组去重实例及分析
2013/11/26 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
vue-axios使用详解
2017/05/10 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
python使用cPickle模块序列化实例
2014/09/25 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
建筑人员岗位职责
2013/12/25 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
《草原》教学反思
2014/02/15 职场文书
接收函格式
2015/01/30 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android