Element實(shí)現(xiàn)表格分頁數(shù)據(jù)選擇+全選所有完善批量操作

后臺管理系統(tǒng)中的列表頁面，一般都會有對列表數(shù)據(jù)進(jìn)行批量操作的功能，例如：批量刪除、批量刪除等。

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

實(shí)現(xiàn)的功能有：

• 分頁數(shù)據(jù)選擇 
• 全選所有數(shù)據(jù)（不是element框架自帶的全選本頁哦?。?/li>

1、分頁數(shù)據(jù)選擇

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

•  row-key  
• reserve-selection

代碼截圖：

事件代碼：

getRowKeys (row) {
 return row.execId
}

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

selectionChange (rows) {
 this.checkList = rows
}

2、全選所有數(shù)據(jù)

element框架中有select-all事件，全選本頁所有數(shù)據(jù)，但是項(xiàng)目中，經(jīng)常會遇到說對所有的進(jìn)行操作，例如批量刪除（刪除所有數(shù)據(jù)，這個(gè)權(quán)限有點(diǎn)大）

實(shí)現(xiàn)思路：

• 一個(gè)全選所有復(fù)選框，當(dāng)選中時(shí)，前端傳遞一個(gè)參數(shù)Flag:1給后臺，后臺就會知道這是對所有數(shù)據(jù)進(jìn)行操作，同時(shí)前后臺之間都不用進(jìn)行龐大的數(shù)據(jù)傳輸 

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

• 選中全選所有復(fù)選框，當(dāng)前頁數(shù)據(jù)需全部是選中狀態(tài)，翻頁到另一頁，這一頁的數(shù)據(jù)也是全部選中狀態(tài) （監(jiān)聽當(dāng)前頁中數(shù)據(jù)）

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
 }
}

• 選中全選所有復(fù)選框，同時(shí)，已經(jīng)翻頁了兩頁，選中的數(shù)據(jù)是兩頁數(shù)據(jù)，若取消其中一行數(shù)據(jù)的選中狀態(tài)，此時(shí)，全選所有取消，當(dāng)前選中的數(shù)據(jù)應(yīng)是：已翻頁的兩頁數(shù)據(jù)-取消的那一行數(shù)據(jù)

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

實(shí)現(xiàn)的表格：

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

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

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對億速云的支持。