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 相关文章推荐
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
Node.js实现文件上传
Jul 05 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
js中的面向对象入门
Mar 06 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 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递归删除目录几个代码实例
2014/04/21 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中max函数用法实例分析
2015/07/17 Python
Python 文件管理实例详解
2015/11/10 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
宿舍卫生检讨书
2014/01/16 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
环保证明
2015/06/23 职场文书
护士业务学习心得体会
2016/01/25 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers