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 05 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
Vue.use源码分析
Apr 22 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
Vue2.0搭建脚手架
Mar 13 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
python+selenium+autoit实现文件上传功能
2017/08/23 Python
神经网络python源码分享
2017/12/15 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
大学生农村教师实习自我鉴定
2013/09/21 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
南湾猴岛导游词
2015/02/09 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
不同意离婚代理词
2015/05/23 职场文书
班主任工作总结范文
2015/08/13 职场文书