vue + element Table的数据多选，多页选择数据回显，分页记录保存选中的数据。

1、html

在el-table添加 @selection-change=“handleSelection”

  <el-table ref="multipleTable"  :data="goodslist" tooltip-effect="dark"  @selection-change="handleSelection" >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" width="60" fixed="left"><template slot-scope="scope">{
   
   { scope.$index }}</template></el-table-column>
            <el-table-column prop="productName" label="商品名称" width="150"></el-table-column>
 </el-table>

2、js

这是回选操作

 methods: {
    
    
    toggleSelection(rows) {
    
    
      console.log('rows',rows)
      if (rows) {
    
    
        rows.forEach(row => {
    
    
          // this.$refs.multipleTable.toggleRowSelection(row)
          this.$nextTick( ()=> {
    
    this.$refs.multipleTable.toggleRowSelection(row);})
        });
      } else {
    
    
        this.$refs.multipleTable.clearSelection();
      }
    },

}

点击选择或全选 。 this.current 是当前页码， 然后进行缓存

    handleSelection(val) {
    
    
      this.multipleSelection = val;
      this.multipleSelectall[this.current] = val
      sessionStorage.setItem('multipleSelectall',JSON.stringify( 		this.multipleSelectall) )
    },

// 跳转页面时勾选已选的商品

setselect(){
    
    
  var {
    
    goodslist}=this
  var multipleSelectall= sessionStorage.getItem('multipleSelectall' )
  var multipleSelectalls=JSON.parse(multipleSelectall)

  var newarr=multipleSelectalls[this.current]
  if(!multipleSelectalls)return
  if(!newarr.length)return
  var arr=[]
  goodslist.filter(res=>{
    
    
    newarr.filter(row=>{
    
    if(row.id==res.id)arr.push(res)})
  })
  this.multipleSelectall=multipleSelectalls
  if(multipleSelectalls[this.current])this.toggleSelection(arr)
},

点击分页

handleCurrentChange(val) {
    
    
  this.current=val
  //请求数据
  
   search('请求参数').then(res => {
    
    
        this.goodslist=res.data.records
        this.total=res.data.total
        this.setselect()
      });
},

这是利用缓存进行会选记录

喜欢的关注前端面试题哟