element-ui表格多选实现翻页选择记忆功能

一、标签如下：
表格显示的数据，遍历的是对象数组，如：[{…},{…},{…},…]。

  
...

二、思路：将每一页的页码作为一个对象（selectData）的key，其值作为一个数组存储当前页选择的数据；切换页码，就取相应页码的对象值显示勾选；切换每页条数时，将数据调整到正确的页码对象值里。存储选择数据的对象selectData是以下这种形式

selectData={
1:[                                      //1为页码，即第一页
{ 第一页选择的数据 },        //第一页存储的已选数据
{ 第一页选择的数据 },
...
],
2:[...]    //第二页，存储的已选数据
...
}

三、实现代码
1、手动点击全选（select-all）或手动点击某项（select），将每个页码作为selectData对象的键，值类型为数组并存入选择的行数据。
注：不要用selection-change，这个页面刷新也会执行，我们需要的手动点击才执行。

handleCheckBox(rows) {                       //rows是数组，返回是当前页已选是数据 [ { .. } , { ... }, .. ]
 var curpage = this.list.pagination.pageData.page    //当前页码，具体由自己写的组件取值
  this.selectData[curpage] =[]
  if(rows.length > 0 ){
    rows.forEach(item=>{
      if(item && item.id !== undefined){    //确保返回的已选数据有效，至于是否用id判断由具体的数据决定
        this.selectData[curpage].push(item)
      }
    })
  }
  this.handleSelectDataLength()                     //该方法是计算一共选择的数据条数
},

2、计算共选择的数据量selectDataLength

handleSelectDataLength(){
  this.selectDataLength = 0
this.selectRows = []
  for(let key in this.selectData){
    if(this.selectData.hasOwnProperty(key)){                   //避免原型属性影响
      this.selectDataLength += this.selectData[key].length/1     
                                //“length/1” 除以1，转化为数值，避免字符串的影响
this.selectData[key].forEach(item=>{
  	this.selectRows.push(item)         //将所有选择的行数据，存到selectRows数组中
})
    }
  }
},

3、切换页码或切换每页条数时，刷新数据。
注：如果表格数据来自接口，以下代码需要放到请求成功后，例
axios.post(url,params).then(res=>{ …放这里… }).catch(err=>{})

     /*
    * 当前页码，具体由自己写的组件取值
    */
    var curpage = this.list.pagination.pageData.page   
    /*
    * 每页数变化/页面变化，调整selectData的每个页码下的已选行数据
    */
    this.tableData.forEach((item,index)=>{
      for(let key in this.selectData){
        this.selectData[key].forEach((value,ind,arr)=>{
         /*
           * key/1,curpage/1转为数值，避免是字符串的影响
           * 当单前页的表格数据有已选数据，且该已选数据所在的对象的key不是当前页码，
           * 就调到当前页码的key的数组值中存储
          */
          if(value.id === item.id && key/1 !== curpage/1){
    			//当前页码对象不存在时，创建空数组
              this.selectData[curpage]?this.selectData[curpage]:this.selectData[curpage]=[]
              this.selectData[curpage].push(value)
              arr.splice(ind,1)          //删除数组中该项
          }
        })
      }
    })
 //已选行数据和表格数据对比，相同则显示勾选，否则清除勾选
var curSelectData = this.selectData[curpage]
this.tableData.forEach(item=>{
  if(curSelectData && curSelectData.length > 0){
    this.selectData[curpage].forEach(row=>{
      if(row.id === item.id){
        this.$refs.tableData.toggleRowSelection(item)
      }
    })
  }else {
    this.$refs.tableData.clearSelection()
  }
})