Element表格分頁數據選擇+全選全部完善批量操做-方案一

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

以前項目中只是簡單的用到Element框架中常規的屬性、事件。在一次機緣巧合下，瞭解到一個公司內部的框架是基於Element框架內部實現了一些插件功能，對於表格這一塊完善了不少功能，當時沒有把握住機會去看源碼是怎麼實現的，如今有點小後悔呢，嚶嚶嚶~~~~不要緊，本身慢慢一點一點實現。

實現的功能有：

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

一、分頁數據選擇
       一開始覺得不就是分頁的時候把以前選中的數據存儲在一個list裏面嘛，而後選擇的時候map一下。等到本身寫代碼的時候，會發現沒有那麼簡單，百度後，發現有兩個屬性被忽視了

•  row-key
•  reserve-selection

代碼截圖：

事件代碼：

getRowKeys (row) {
  return row.execId
}複製代碼

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

selectionChange (rows) {
  this.checkList = rows
}複製代碼

二、全選全部數據

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方法

最後說一句：當你累了，不開心了，去看RM吧，你會發現，世間還有這麼美好的一羣人，在開心的笑，努力的生活！