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

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

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

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

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

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

•  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ù)，但是項目中，經(jīng)常會遇到說對所有的進行操作，例如批量刪除（刪除所有數(shù)據(jù)，這個權(quán)限有點大）

實現(xiàn)思路：

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

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

• 選中全選所有復選框，當前頁數(shù)據(jù)需全部是選中狀態(tài)，翻頁到另一頁，這一頁的數(shù)據(jù)也是全部選中狀態(tài) （監(jiān)聽當前頁中數(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
 }
}

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

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

實現(xiàn)的表格：

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

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

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

最新評論