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 07 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
Three.js快速入门教程
Sep 09 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
json数据格式常见操作示例
Jun 13 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
Javascript中的解构赋值语法详解
Apr 02 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执行速度全攻略(下)
2006/10/09 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
详解Python装饰器由浅入深
2016/12/09 Python
Python获取当前路径实现代码
2017/05/08 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
省优秀教师事迹材料
2014/01/30 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
Oracle锁表解决方法的详细记录
2022/06/05 Oracle