element ui分页多选,翻页记忆的实例


Posted in Javascript onSeptember 03, 2019

先说需求:实时记录当前选中的分页中的列表,分页保存数据,然后在用选中的数据进行某些操作;PS:左下角的数字为记录的当前选中的列表的和

element ui分页多选,翻页记忆的实例

直接上可用的代码,前提已配置好各种环境

HTML部分

<!--table组件需要使用ref="table"-->
<template>
 <div>
 <el-table :data="tableData" ref="table" stripe style="width: 100%" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="商品名称"></el-table-column>
  <el-table-column prop="barcode" label="商品编码"></el-table-column>
  <el-table-column prop="quantity" label="区域总库存"></el-table-column>
 </el-table>
 <div class="block" v-show="page.pageTotal>10">
  <el-pagination @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-size="page.pnum" layout="total, prev, pager, next , jumper" :total="page.pageTotal">
  </el-pagination>
 </div>
 <div>
  {{multipleSelectionAll.length}}
 </div>
 </div>
</template>

JS部分

export default {
 data(){
  return {
  tableData: [], // 表格数据 
  multipleSelectionAll:[],//所有选中的数据包含跨页数据
  multipleSelection:[],// 当前页选中的数据
  idKey: 'barcode', // 标识列表数据中每一行的唯一键的名称
  page:{
   //每页数据量
   pnum:10,
   //数据总数
   pageTotal:0,
   //当前页,从1开始
   currentPage:1,
  }
  }
 },
 methods: {
  handleCurrentChange(){
  this.changePageCoreRecordData();
  if(!this.$isNull(this.page.pageTotal)) this.getGoodsList();
  },
  handleSelectionChange (val) {
  this.multipleSelection = val;
  //实时记录选中的数据
  setTimeout(()=>{
   this.changePageCoreRecordData();
  }, 50)
  },
  setSelectRow() {
  if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
   return;
  }
  // 标识当前行的唯一键的名称
  let idKey = this.idKey;
  let selectAllIds = [];
  let that = this;
  this.multipleSelectionAll.forEach(row=>{
   selectAllIds.push(row[idKey]);
  })
  this.$refs.table.clearSelection();
  for(var i = 0; i < this.tableData.length; i++) {   
   if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
   // 设置选中,记住table组件需要使用ref="table"
   this.$refs.table.toggleRowSelection(this.tableData[i], true);
   }
  }
  },
  // 记忆选择核心方法
  changePageCoreRecordData () {
  // 标识当前行的唯一键的名称
  let idKey = this.idKey;
  let that = this;
  // 如果总记忆中还没有选择的数据,那么就直接取当前页选中的数据,不需要后面一系列计算
  if (this.multipleSelectionAll.length <= 0) {
   this.multipleSelectionAll = this.multipleSelection;
   return;
  }
  // 总选择里面的key集合
  let selectAllIds = [];
  this.multipleSelectionAll.forEach(row=>{
   selectAllIds.push(row[idKey]);
  })
  let selectIds = []
  // 获取当前页选中的id
  this.multipleSelection.forEach(row=>{
   selectIds.push(row[idKey]);
   // 如果总选择里面不包含当前页选中的数据,那么就加入到总选择集合里
   if (selectAllIds.indexOf(row[idKey]) < 0) {
   that.multipleSelectionAll.push(row);
   }
  })
  let noSelectIds = [];
  // 得到当前页没有选中的id
  this.tableData.forEach(row=>{
   if (selectIds.indexOf(row[idKey]) < 0) {
   noSelectIds.push(row[idKey]);
   }
  })
  noSelectIds.forEach(id=>{
   if (selectAllIds.indexOf(id) >= 0) {
   for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
    if (that.multipleSelectionAll[i][idKey] == id) {
    // 如果总选择中有未被选中的,那么就删除这条
    that.multipleSelectionAll.splice(i, 1);
    break;
    }
   }
   }
  })
  },
  //请求接口部分
  getGoodsList(){
  let data = {};
  data['page'] = this.page.currentPage;
  data['pnum'] = this.page.pnum;
  this.$ajax({
   url:'goods/list',
   data:data
  }).then(val => {
   this.tableData = val.data.rows ? val.data.rows : [];
   this.page = {
   pnum:10,
   pageTotal:val.data.total,
   currentPage:val.data.page,
   };
   setTimeout(()=>{
   this.setSelectRow();
   }, 50)
  })
  }
 },
 created () {
  this.getGoodsList()
 }
 }

代码可直接粘贴到项目中使用,亲测可用,傻瓜式代码

以上这篇element ui分页多选,翻页记忆的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
JS 类型转换常见方法小结
May 31 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
javascript中this指向详解
Apr 23 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
JavaScript创建、读取和删除cookie
Sep 03 #Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 #Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 #Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 #Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 #Javascript
layui表格分页 记录勾选的实例
Sep 02 #Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 #Javascript
You might like
PHP 程序授权验证开发思路
2009/07/09 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
使用js+jquery实现无限极联动
2013/05/23 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python学习 流程控制语句详解
2016/06/01 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
python处理写入数据代码讲解
2020/10/22 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
网络编辑求职信
2014/04/30 职场文书
工程部文员岗位职责
2015/02/04 职场文书
2015毕业寄语大全
2015/02/26 职场文书
道歉信怎么写
2015/05/12 职场文书