vue + element-ui Table 多頁選擇數據並記錄保存選中的數據

需求： 開發中我們常常會用到表格的複選框功能，在表格進行翻頁或者切換條數時，希望還能記住之前的勾選項。

問題：當我選了第一頁的一條數據時，點到第二頁，數據就刷新了，第一頁選的選項也就沒有保存了，所以就只能永遠選擇一頁內的數據。

<el-table
	ref="multipleTable1"
	:data="tableData4"
	tooltip-effect="dark"
	style="width: 100%;cursor: pointer;"
	:row-key="getRowKeys"
	@selection-change="handleSelectionChange"
	@row-click="clickRow1">
		<el-table-column
			type="selection"
			width="55"
			:reserve-selection="true">
		</el-table-column>
</el-table>
        
<div style="display: inline-flex;flex-direction: row;justify-content: flex-end;width: 100%;">
	<el-pagination
		@size-change="handleSizeChangeTask"
		@current-change="handleCurrentChangeTask"
		:current-page="pageTask"
		:page-sizes="[5, 10, 15, 20]"
		:page-size="pageSizeTask"
		layout="total, sizes, prev, pager, next, jumper"
		:total=totalTask>
	</el-pagination>
  </div>
            
<script>
  export default {
    data() {
      return {
        multipleSelection: []
      }
    },

    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

解決方案：

用 element-ui table 裏這個參數：
（1）reserve-selection -->僅對 type=selection 的列有效，類型爲 Boolean，爲 true 則會在數據更新之後保留之前選中的數據（需指定 row-key）

（2）配合row-key -->行數據的 Key，用來優化 Table 的渲染；在使用 reserve-selection 功能的情況下，該屬性是必填的。
         將row-key設置爲表格中唯一的字段名稱。這樣就實現了後端分頁在翻頁或切換條數時，記住之前的複選框選項。
         row-key類型爲 String 時，支持多層訪問：user.info.id，但不支持 user.info[0].id，此種情況請使用 Function。

data(){
    return{
        // 獲取row的key值
        getRowKeys(row) {
            return row.id;
        },
    }
}

注：此方式存在點擊表頭複選框不是全選所有數據而是選擇當前頁所有數據的問題