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()
    })
  }