关于element 框架中table表格选中并切换下一页之前选中数据消失的问题

Posted 2021-03-23 sunnyeve

问题描述：

       在实际项目中使用element框架的table表格时，发现当前页选中了数据，点击切换下一页时，再选中数据，发现上一页选中的数据消失了。(目的是:要把用户选择的所有数据显示到页面上)

代码如下：     

<!-- html 代码 -->
<table :data="tableData" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKey"> // ３、行数据的key,用来优化table的渲染，在使用reserve-selection功能与显示树形数据时，该属性必填，支持多层访问，但不支持user.info[0].id这种，不过可以使用function
   <el-table-column type="selection" :reserve-selection="true"></el-taable-column>  //４、这个是选择框  reserve-selection 仅对type=selection的列有效，为true则会在数据更新之后保留之前选中的数据，需要指定row-key。
   <！--  省略掉其他 el-table-column 代码  -->
</table>

<!-- 分页  -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[5,10,15]" layout="total,sizes,prev,pager,next" :total="total">
</el-pagination>

<div class="show-choose-data">
  //显示用户选中的所有数据   {{multipleSelectionAll }}
</div>

<!--  js 代码  -->
假定 我们选中的数据赋值给变量  multipleSelectionAll 

首先： 在请求 tableData 数据的function 中做的一些操作：

      requestTableData:function(){
          //请求回来数据后,进行两次循环，循环tableData 以及 multipleSelectionAll
          this.tableData.forEach((item,i)=>{
               this.multipleSelectionAll.forEach((multItem,j)=>{
                   if(this.tableData[i].某id值 == this.multipleSelectionAll[j].某id值){
                      this.$refs.multipleTable.toggleRowSelection(this.tableData[i],true);//这步操作是让  页面显示选中的数据
                  }
               })
          })
      },
      handleSelectionChange:function(val){
         this.multipleSelectionAll = val //这步是将页面选中的数据赋值给 multipleSelectionALL ,选中的数据都存储在这个变量里面
      },
      getRowKey:function(row){
         return row.某id值
      },
      handleSizeChange:function(val){
         //调用请求 tableData 数据的接口，size 变化
      },
      handleCurrentChange:function(val){
        //调用请求 tableData  数据的接口，currentpage 变化
      }

总结当前问题用到的知识点：

        1、用到 table 中的 toggleRowSelection 方法： 用于多选表格，切换某一行的选择状态，如果使用了第二个参数，则是设置这一行选中与否(selected 为true则选中） 参数为(row,selected) 。

        2、用到 table中的事件selection-change　，当选择项发生变化时会触发该事件。（３－４）