在iview的table組件中，前端在多選時如果點擊下一頁則丟失了上一頁table的多選數據（由于采用的后端分頁，每次翻頁會直接刷新為新數據）

---

實現效果
全選反選 選中單條 取消單條

---

代碼部分

定義數組

selectedData: [], // 選中的數組arr1: [], // 原本arr2: [] // 去重后的

表格

<Table class="mt20" :data="tableData" :loading="loading" :columns="tableColumns" ref="table"@on-select="onSelectAll" @on-select-cancel='onSelectCancel'@on-select-all ='onSelectAll' @on-select-all-cancel='onSelectAllCancel'></Table>

JS

// 點擊全選時觸發onSelectAll (selection) {// arr1 去重之前的 選中后合并的數組this.arr1 = [...selection, ...this.selectedData]// 去重 some 和every 相反，只要有一個滿足條件，就返回truefor (let val of this.arr1) {if (!this.arr2.some(item => item.serialNum === val.serialNum)) {this.arr2.push(val)}}if (this.arr2.length >= 30) {this.enableModal = true}},// 取消選中某一項時觸發onSelectCancel (selection, row) {// 拿到取消選擇的項數據 從arr2中去除 findIndex找返回傳入一個符合條件的數組第一個元素位置,沒有返回-1let result = this.arr2.findIndex((ele) => {return ele.serialNum === row.serialNum})this.arr2.splice(result, 1)},// 點擊取消全選時觸發onSelectAllCancel () {// 拿到當前分頁的數據進行取消選中處理// every方法，只要有一項不滿足條件就返回false，也就是說必須每一項都得滿足才能返回true。返回的是布爾值。// * filter方法，只要條件滿足，我就將此元素返回出去，返回的是元素。// * 在本示例中，只要arr1中存在與arr2中相同的元素，我就返回false。也就是說，我拿著arr2中// * 的第一項去和arr1中的每一項去比較，如果code都不相等，滿足所有條件，我就返回true。// * 在filter中，只要條件為true，我就將這一項返回出去，就實現了批量刪除的效果。this.arr2 = this.arr2.filter(item => {return this.tableData.every(item2 => {return item.serialNum !== item2.serialNum})})},

本文采用 serialNum 作為唯一的值 可以選為id 根據具體情況而定

---

每次點擊分頁的時候，獲取到最新一頁的數據，進行選中回顯
在點擊分頁 調用的事件里寫

getTableList (pageIndex) {this.pageIndex = pageIndexthis.loading = trueconst data = {name: this.name,serialNum: this.serialNum,pageIndex,pageSize: this.pageSize}getDevicePageList(data).then(res => {const { data: {data, code} } = resif (data && code === 0) {data.list.forEach(item => {// 禁用選項if (item.id === 19) { // 判斷條件this.$set(item, '_disabled', true)}this.arr2.forEach(element => {if (element.serialNum === item.serialNum) {this.$set(item, '_checked', true)}})})this.tableData = data.listthis.dataCount = data.total} else {this.$Message.error(res.message)}this.loading = false}, err => {// 接口錯誤console.log(err)}).catch((err) => {// 處理邏輯出錯console.log(err)})},

其中， 這一段具為重要
觸發翻頁按鈕時 iview提供了_checked的屬性 設置true即為選中

data.list.forEach(item => {this.arr2.forEach(element => {if (element.serialNum === item.serialNum) {this.$set(item, '_checked', true)}})

總結

以上是生活随笔為你收集整理的iview table后端分页 多选 翻页选中回显的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。