当前位置： 移动技术网 > IT编程>开发语言>JavaScript > element ui分页多选,翻页记忆的实例

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

2019年09月06日  | 移动技术网IT编程  | 我要评论

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

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

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分页多选,翻页记忆的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网