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

ゝ一纸荒年。 2022-12-26 02:24 90阅读 0赞

## 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()
          });
    },

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

## 喜欢的关注前端面试题哟 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4b6dc9be543d4488b37ae2e0ddec0c70.png