elementui中表格多選+分頁，保存所有選中數據

element UI中table表格在選中數據後點擊分頁，再選中數據，回到第一頁後，原來選中的數據已經不再是勾選狀態了，現在要怎樣記住所有分頁中的勾選狀態呢？我這裡有比較簡便的方法。不需要緩存數據等複雜的方式。

1、首先在table標簽上定義row-key和ref標誌名稱。具體row-key等功效，可以參考element UI文檔。代碼如下：

 <el-table
          ref="table"
          v-loading="loading"
          :data="dataList"
          row-key="id"
          @select="selectItem"
          @select-all="selectAll"
        >
          <el-table-column
            key="1"
            type="selection"
            width="40"
            reserve-selection
          />
</el-table>

2、定義選擇單列（selectItem）和全選（selectAll）的方法。代碼如下：

selectItem(list, row) {
    this.checkList = list
}

把當前頁選中的數據保存到checkList數組中，該數據僅保存的是當前頁選中數據。（若切換分頁選中，數據會被覆蓋為最新選中數據）

 selectAll(selection) {
      // 若取消全選，當前頁的選中數據移除
      if (selection.length === 0) {
        const ids = this.dataList.map((i) => {
          return i.id
        })
        for (var i = 0; i < this.checkList.length; i++) {
          if (ids.indexOf(this.checkList[i].id) > -1) {
            this.checkList.splice(i, 1)
            i--
          }
        }
      }
      const arr = [...selection, ...this.checkList]
      this.checkList = Array.from(new Set(arr))
},

全選的方法中，需要判斷是勾選還是取消勾選。若取消勾選，需要把當前頁選中的數據全部清空。

3、清空所有選中的數據方式。代碼如下：

this.$refs.table.clearSelection()
this.checkList = []

清空表格中選中項，再清空選中數組。

這種處理方式，就可以在分頁時依然記得之前選中的數據，返回原來分頁數據還在，全選選中與否，數據都可以隨之修改。nice～～