關於element 框架中table表格選中並切換下一頁之前選中數據消失的問題


問題描述:

       在實際項目中使用element框架的table表格時,發現當前頁選中了數據,點擊切換下一頁時,再選中數據,發現上一頁選中的數據消失了。(目的是:要把用戶選擇的所有數據顯示到頁面上)

代碼如下:     

<!-- html 代碼 -->
<table :data="tableData" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKey"> // 3、行數據的key,用來優化table的渲染,在使用reserve-selection功能與顯示樹形數據時,該屬性必填,支持多層訪問,但不支持user.info[0].id這種,不過可以使用function
   <el-table-column type="selection" :reserve-selection="true"></el-taable-column>  //4、這個是選擇框  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 ,當選擇項發生變化時會觸發該事件。(3-4)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM