問題描述:
在實際項目中使用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)