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 相关文章推荐
19个很有用的 JavaScript库推荐
Jun 27 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
vue中render函数的使用详解
Oct 12 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
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采集时被封ip的解决方法
2010/08/29 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
js跳转页面方法总结
2014/01/29 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
详解VSCode配置启动Vue项目
2019/05/14 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
在windows系统中实现python3安装lxml
2016/03/23 Python
Python自动发邮件脚本
2017/03/31 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python 伯努利分布详解
2020/02/25 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
元旦晚会邀请函
2014/01/27 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
cf战队收人口号
2014/06/21 职场文书
先进事迹演讲稿
2014/09/01 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
居住证明范文
2015/06/17 职场文书
课改心得体会范文
2016/01/25 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python