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实现图片信息的浮动显示实例代码
Aug 28 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
js密码强度检测
Jan 07 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
js正则表达式简单校验方法
Jan 03 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编写大型网站问题集
2007/03/06 PHP
PHP学习之整理字符串
2011/04/17 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
javascript 禁止复制网页
2009/06/11 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
班级年度安全计划书
2014/05/01 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
大国崛起观后感
2015/06/02 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python