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

最新推荐文章于 2025-01-03 14:23:20 发布

前端技术栈

最新推荐文章于 2025-01-03 14:23:20 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42981560/article/details/110519782

vue 专栏收录该内容

52 篇文章

订阅专栏

博客介绍了前端开发中利用缓存进行回选记录的方法。在HTML的el - table添加特定事件，在JS里进行回选操作，包括点击选择或全选、缓存当前页码，还能在跳转页面时勾选已选商品，最后鼓励关注前端面试题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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