表格翻頁選記錄
場景：從多頁表格中選擇一些項，把選中的項數據拿出來
問題：由於每次翻頁的時是重新從請求並更新表格數據，所以一旦翻頁，當前頁已選中的數據丟失了。
- 保留選中的數據，需要設置 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);
- 回顯及選擇數據和全選操作
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]
},
}
}
獲取表格選中數據的幾種方法
| 屬性 | 說明 | 類型 |
|---|---|---|
| 獲取當前表格的全量數據 | ||
| getTableData() | 獲取當前表格的數據（完整的全量表體數據、處理條件之后的全量表體數據、當前渲染中的表體數據、當前渲染中的表尾數據） | {fullData, visibleData, tableData, footerData} |
| 單選框數據 | ||
| getRadioRecord(isFull) | 用於 type=radio，獲取當前已選中的行數據（當前列表，如果 isFull=true 則獲取全表已選中的數據） | Row |
| getRadioReserveRecord(isFull) | 用於 radio-config.reserve，獲取已保留選中的行數據（不包含當前列表，如果 isFull=true 則不包含全部列表） | Row |
| 復選框數據 | ||
| getCheckboxRecords(isFull) | 用於 type=checkbox，獲取當前已選中的行數據（當前列表，如果 isFull=true 則獲取全表已選中的數據） | Array
|
| getCheckboxReserveRecords(isFull) | 用於 checkbox-config.reserve，獲取已保留選中的行數據（不包含當前列表，如果 isFull=true 則不包含全部列表） | Array
|