表格翻頁選記錄

場景：從多頁表格中選擇一些項，把選中的項資料拿出來
問題：由於每次翻頁的時是重新從請求並更新表格資料，所以一旦翻頁，當前頁已選中的資料丟失了。

1. 保留選中的資料，需要設定 row-id 和 checkbox-config 中的 reserve 屬性

<vxe-grid
	row-id="id"
	:checkbox-config="{highlight: true,trigger: 'row',reserve: true,range: true}"
	@checkbox-all="selectAllEvent"
	@checkbox-change="selectChangeEvent"
>
</vxe-grid>
# highlight: true	高亮勾選行
# trigger: 'row'    點選行觸發
# reserve: true 	是否保留勾選狀

// 資料回顯 setCheckboxRow(rows, checked)
# 用於 type=checkbox 複選框，設定行為選中狀態，第二個引數為選中與否
this.$refs.vxeGrid.setCheckboxRow(this.selectedProject, true);
 

2. 回顯及選擇資料和全選操作

export default {
	props: {
		selectedList: { // 之前選的數，用於回顯
			type: Array,
			default: () => ([])
		}
	}，
	data() {
		return {
			curSelectedList: [], // 當前選擇的資料
		}
	},
	mounted() {
		this.curSelectedList = this.selectedList
	},
	methods: {
		checkChange({ records }) {
          const $table = this.$refs.vxeGrid 
          const reserveList = $table.getCheckboxReserveRecords()
          this.curSelectedList = [...records, ...reserveList]
        }, 
        checkAll({ records }) {
          const $table = this.$refs.vxeGrid  
          const reserveList = $table.getCheckboxReserveRecords()
          // 用於 checkbox-config.reserve，獲取已保留選中的行資料（不包含當前列表，如果 isFull=true 則不包含全部列表
          this.curSelectedList = [...records, ...reserveList]
        },
	}
}
 

獲取表格選中資料的幾種方法