element UI中table表格在選中資料后點擊分頁，再選中資料，回到第一頁后，原來選中的資料已經不再是勾選狀態了，現在要怎樣記住所有分頁中的勾選狀態呢？我這里有比較簡便的方法，不需要快取資料等復雜的方式，
1、首先在table標簽上定義row-key和ref標志名稱，具體row-key等功效，可以參考element UI檔案，代碼如下：
<el-table ref="table" v-loading="loading" :data="dataList" row-key="id" @select="selectItem" @select-all="selectAll" > <el-table-column key="1" type="selection" width="40" reserve-selection /> </el-table>
2、定義選擇單列（selectItem）和全選（selectAll）的方法，代碼如下：
selectItem(list, row) { this.checkList = list }
把當前頁選中的資料保存到checkList陣列中，該資料僅保存的是當前頁選中資料，（若切換分頁選中，資料會被覆寫為最新選中資料）
selectAll(selection) { // 若取消全選，當前頁的選中資料移除 if (selection.length === 0) { const ids = this.dataList.map((i) => { return i.id }) for (var i = 0; i < this.checkList.length; i++) { if (ids.indexOf(this.checkList[i].id) > -1) { this.checkList.splice(i, 1) i-- } } } const arr = [...selection, ...this.checkList] this.checkList = Array.from(new Set(arr)) },
全選的方法中，需要判斷是勾選還是取消勾選，若取消勾選，需要把當前頁選中的資料全部清空，
3、清空所有選中的資料方式，代碼如下：
this.$refs.table.clearSelection() this.checkList = []
清空表格中選中項，再清空選中陣列，
這種處理方式，就可以在分頁時依然記得之前選中的資料，回傳原來分頁資料還在，全選選中與否，資料都可以隨之修改，nice～～
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458141.html
標籤：其他