vue頁面翻頁勾選的記憶功能

實現思路:

<template>
  <div>
    <div class="customer-container">
      <el-row>
        <el-form :inline="true" :model="tableList" class="demo-form-inline">
          <el-form-item label="">
            <el-input size="mini" style="width:140px;" v-model="tableList.pageName" placeholder="請輸入頁面名稱"></el-input>
            <el-input size="mini" style="width:140px;" v-model="tableList.shopName" placeholder="請輸入店鋪名稱"></el-input>
            <el-button size="small" type="primary" style="margin-left: 10px;"
                       @click="getSearchPage(tableList.shopName,tableList.pageName)">查詢
            </el-button>
          </el-form-item>
          <!--<el-button style="float:left;" type="primary" size="small" @click="handleChooseData">獲取選中的內容</el-button>-->
        </el-form>
      </el-row>
    </div>
    <el-table ref="multipleTable" :data="gridDatas" border tooltip-effect="dark"  style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="pho" label="圖片">
        <!– 圖片的顯示 –>
        <template   slot-scope="scope">
          <img :src="scope.row.pho"  min-width="70" height="70" />
        </template>
      </el-table-column>
      <el-table-column prop="goodsName" label="商品名稱">
      </el-table-column>
    </el-table>
    <el-pagination class="pagination" @size-change="SizeChangeDanpin" @current-change="handleCurrentChange" background layout="total, prev, pager, next , jumper" :current-page.sync="tableList.pageIndex" :total="totalCount">
    </el-pagination>
  </div>
</template>

定義data值:

data() {
  return {
    selectedData:[],
    tableList: {
      goodsName: '',
      companyId: '00000001',
      pageIndex: 1,
      goodsId: ''
    },
    gridDatas: [],
    totalCount:1,
    idKey: 'goodsId', // 標識列表數據中每一行的唯一鍵的名稱(需要按自己的數據改一下)
    multipleSelection: [],
    multipleSelectionAll:[],//所有選中的數據包含跨頁數據
  }
},

方法中定義：

methods: {
    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.multipleTable.clearSelection();
      for(var i = 0; i < this.gridDatas.length; i++) {
        if (selectAllIds.indexOf(this.gridDatas[i][idKey]) >= 0) {
          // 設置選中，記住table組件需要使用ref="table"
          this.$refs.multipleTable.toggleRowSelection(this.gridDatas[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]);
      })
      console.log(this.multipleSelectionAll)
      console.log(selectAllIds)
      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.gridDatas.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;
            }
          }
        }
      })
    },
    //點擊商品名稱頁
    handleCurrentChange(val) {
      this.changePageCoreRecordData();
      this.tableList.pageIndex=val;
      this.getDatas();
    },
    // 改變單品表格每頁數目
    SizeChangeDanpin(val) {
      this.changePageCoreRecordData();
      console.log(`每頁 ${val} 條`);
    },
    getDatas(){
      WxHomeGoodOn(this.tableList).then((data) => {
        this.loading = false;
        if(data.code === 1){
            if(data !==''){
            this.loading = false;
            this.gridDatas = data.data;
            this.totalCount = data.pageInfo.totalCount;
              setTimeout(()=>{
                this.setSelectRow();
              }, 200)
          }
        }
      }).catch(message => {
        console.log('"請求失敗"')
        this.loading = false;
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 得到選中的所有數據
    getAllSelectionData() {
      // 再執行一次記憶勾選數據匹配，目的是為了在當前頁操作勾選后直接獲取選中數據
      this.changePageCoreRecordData();
      console.log(this.multipleSelectionAll)
    }
  },
  mounted(){
    this.$nextTick(function () {
      // 初始化渲染
      this.tableList.pageIndex = 1
      this.getDatas()
    })
  }