這篇文章將為大家詳細講解有關(guān)如何實現(xiàn)element ui分頁多選和翻頁記憶，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到肥西網(wǎng)站設(shè)計與肥西網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋肥西地區(qū)。

先說需求：實時記錄當(dāng)前選中的分頁中的列表，分頁保存數(shù)據(jù)，然后在用選中的數(shù)據(jù)進行某些操作；PS:左下角的數(shù)字為記錄的當(dāng)前選中的列表的和

直接上可用的代碼，前提已配置好各種環(huán)境

HTML部分

<!--table組件需要使用ref="table"-->
<template>
 <div>
 <el-table :data="tableData" ref="table" stripe  @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="區(qū)域總庫存"></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: [], // 表格數(shù)據(jù) 
  multipleSelectionAll:[],//所有選中的數(shù)據(jù)包含跨頁數(shù)據(jù)
  multipleSelection:[],// 當(dāng)前頁選中的數(shù)據(jù)
  idKey: 'barcode', // 標(biāo)識列表數(shù)據(jù)中每一行的唯一鍵的名稱
  page:{
   //每頁數(shù)據(jù)量
   pnum:10,
   //數(shù)據(jù)總數(shù)
   pageTotal:0,
   //當(dāng)前頁，從1開始
   currentPage:1,
  }
  }
 },
 methods: {
  handleCurrentChange(){
  this.changePageCoreRecordData();
  if(!this.$isNull(this.page.pageTotal)) this.getGoodsList();
  },
  handleSelectionChange (val) {
  this.multipleSelection = val;
  //實時記錄選中的數(shù)據(jù)
  setTimeout(()=>{
   this.changePageCoreRecordData();
  }, 50)
  },
  setSelectRow() {
  if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
   return;
  }
  // 標(biāo)識當(dāng)前行的唯一鍵的名稱
  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) {
   // 設(shè)置選中，記住table組件需要使用ref="table"
   this.$refs.table.toggleRowSelection(this.tableData[i], true);
   }
  }
  },
  // 記憶選擇核心方法
  changePageCoreRecordData () {
  // 標(biāo)識當(dāng)前行的唯一鍵的名稱
  let idKey = this.idKey;
  let that = this;
  // 如果總記憶中還沒有選擇的數(shù)據(jù)，那么就直接取當(dāng)前頁選中的數(shù)據(jù)，不需要后面一系列計算
  if (this.multipleSelectionAll.length <= 0) {
   this.multipleSelectionAll = this.multipleSelection;
   return;
  }
  // 總選擇里面的key集合
  let selectAllIds = [];
  this.multipleSelectionAll.forEach(row=>{
   selectAllIds.push(row[idKey]);
  })
  let selectIds = []
  // 獲取當(dāng)前頁選中的id
  this.multipleSelection.forEach(row=>{
   selectIds.push(row[idKey]);
   // 如果總選擇里面不包含當(dāng)前頁選中的數(shù)據(jù)，那么就加入到總選擇集合里
   if (selectAllIds.indexOf(row[idKey]) < 0) {
   that.multipleSelectionAll.push(row);
   }
  })
  let noSelectIds = [];
  // 得到當(dāng)前頁沒有選中的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()
 }
 }

關(guān)于“如何實現(xiàn)element ui分頁多選和翻頁記憶”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享題目：如何實現(xiàn)elementui分頁多選和翻頁記憶-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/article34/gpspe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄、外貿(mào)建站、Google、網(wǎng)站內(nèi)鏈、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)