Element實現表格分頁數據選擇+全選所有完善批量操作

后臺管理系統中的列表頁面，一般都會有對列表數據進行批量操作的功能，例如：批量刪除、批量刪除等。

之前項目中只是簡單的用到Element框架中常規的屬性、事件。在一次機緣巧合下，了解到一個公司內部的框架是基于Element框架內部實現了一些插件功能，對于表格這一塊完善了很多功能，當時沒有把握住機會去看源碼是怎么實現的，現在有點小后悔呢，嚶嚶嚶~~~~沒關系，自己慢慢一點一點實現。

實現的功能有：

• 分頁數據選擇 
• 全選所有數據（不是element框架自帶的全選本頁哦！）

1、分頁數據選擇

一開始以為不就是分頁的時候把之前選中的數據存儲在一個list里面嘛，然后選擇的時候map一下。等到自己寫代碼的時候，會發現沒有那么簡單，百度后，發現有兩個屬性被忽視了

•  row-key  
• reserve-selection

代碼截圖：

事件代碼：

getRowKeys (row) {
 return row.execId
}

這樣通過 selectionChange 方法就能獲取頁面中選中數據的改變，將選中的數據保存到list中

selectionChange (rows) {
 this.checkList = rows
}

2、全選所有數據

element框架中有select-all事件，全選本頁所有數據，但是項目中，經常會遇到說對所有的進行操作，例如批量刪除（刪除所有數據，這個權限有點大）

實現思路：

• 一個全選所有復選框，當選中時，前端傳遞一個參數Flag:1給后臺，后臺就會知道這是對所有數據進行操作，同時前后臺之間都不用進行龐大的數據傳輸 

<el-checkbox v-model="allCheck" @change="allCheckEvent">全選所有</el-checkbox>

• 選中全選所有復選框，當前頁數據需全部是選中狀態，翻頁到另一頁，這一頁的數據也是全部選中狀態 （監聽當前頁中數據）

allCheckEvent () {
 if (this.allCheck) {
 this.testList.forEach(row => {
 this.$refs.recordTable.toggleRowSelection(row, true)
 })
 } else {
 this.$refs.recordTable.clearSelection()
 }
}

watch: {
 testList: {
 handler (value) {
 if (this.allCheck) {
 let that = this
 let len = that.checkList.length
 value.forEach(row => {
  for (let i = 0; i < len; i++) {
  if (row.execId === that.checkList[i].execId) {
  that.$refs.recordTable.toggleRowSelection(row, false)
  break
  } else {
  that.$refs.recordTable.toggleRowSelection(row, true)
  }
  }
 })
 }
 },
 deep: true
 }
}

• 選中全選所有復選框，同時，已經翻頁了兩頁，選中的數據是兩頁數據，若取消其中一行數據的選中狀態，此時，全選所有取消，當前選中的數據應是：已翻頁的兩頁數據-取消的那一行數據

selectOne () {
 if (this.allCheck) {
 this.allCheck = false
 }
}

實現的表格：

走了不少彎路才注意到的問題：

• 若從第一頁翻選到第二頁，然后又回到第一頁，選中的數據理應是1+2兩頁的數據，現實是1+2+1這三頁數據，在展現形式上是看不出來問題，而且前面說了，全選所有的時候，我向后臺傳的參數只是一個flag，而不是這些選中數據。但是若在第一頁取消一行數據，此時全選所有數據框已取消，本條數據也不是選中狀態，翻到第二頁，在回到第二頁，Duang~那條數據又回到了選中狀態！因為選中數據中該條數據是兩條啊，你取消了一個，另一個還在呀，當然你再取消一次，再回來，是取消狀態，bug，bug，bug！
• 想到的就是數據要去重，首先想到的是從結果去重，在selectionChange方法中去重，悲劇了，根本不起作用，理清思路后發現：當選擇項發生改變時，調用selectionChange方法獲取選中的所有數據，此時我們用forEach遍歷數據，用toggleRowSelection方法將頁面中的數據選中，此時toggleRowSelection一次，selectionChange方法執行一次 那就在監聽數據時，如果數據ID相同，不在執行toggleRowSelection方法

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。