表格翻页选记录
场景：从多页表格中选择一些项，把选中的项数据拿出来
问题：由于每次翻页的时是重新从请求并更新表格数据，所以一旦翻页，当前页已选中的数据丢失了。
- 保留选中的数据，需要设置 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 |