vxe-table 复选框--分页选择及回显数据

解决vxe-table复选框跨页选中和数据回显
根据vxe-table官方文档，想要保留选中的数据，需要用到配置项 “ checkbox-config 和 row-config” 
Vxe Table v4官网



html代码

<vxe-table
        ref="tableRef"
        :header-cell-style="{
          'text-align': 'center',
          backgroundColor: '#F2F2F2',
          color: '#000000'
        }"
        :cell-style="{ 'text-align': 'center', color: '#000000' }"
        height="500"
        min-height="48px"
        :data="data"
        border
        stripe
        resizable
        @checkbox-change="handleSelectionChange"
        @checkbox-all="selectAllCheckboxChange"
        style="width: 97%; margin: 0 auto"
        @cell-click="rowClick"
        :seq-config="{ seqMethod }"
        :row-config="{ keyField: 'id' }"
        :checkbox-config="{ reserve: true }"
      >
    <vxe-column type="checkbox" width="55" />
    <vxe-column title="序号" type="seq" align="center" width="60" />
</vxe-table>

因为需求要单击行也要选中checkbox所以上述代码写了3个方法，下面是获取选中行的数据

//单行选中checkbox
const rowClick = ({ row }) => {
  const b = tableRef.value.getCheckboxRecords() //当前页点击选中的数据
  const a = tableRef.value.getCheckboxReserveRecords() //当前页之前点击选中的数据
  state.multipleSelection = [...a, ...b] 
}

//
const handleSelectionChange = ({ checked, records, reserves, row }) => {
  const b = tableRef.value.getCheckboxRecords() //当前页点击选中的数据
  const a = tableRef.value.getCheckboxReserveRecords() //当前页之前点击选中的数据
  state.multipleSelection = [...a, ...b]
}

//全选
const selectAllCheckboxChange = (checked) => {
  const b = tableRef.value.getCheckboxRecords() //当前页点击选中的数据
  const a = tableRef.value.getCheckboxReserveRecords() //当前页之前点击选中的数据
  state.multipleSelection = [...a, ...b]
}

state.multipleSelection //自定义数组存选中的所有数据（包括翻页的数据）
tableRef.value  //表格实例
getCheckboxRecords（） getCheckboxReserveRecords（） //vxe-table 提供的方法

因为用户可能会点击行选中数据 或者点击checkBox选中数据，所以上述3个方法最好都写上，以防万一。（如果需求没有单击行选中数据，第一个方法可不写