vxe-table

1.跨页选中，回填

 <m-table :height="tableHeight" :row-config="{ isHover: true }" show-overflow :data="fileList" ref="xTable"
            border @checkbox-all="selectAllChangeEvent" @checkbox-change="selectChangeEvent">
            <vxe-column type="checkbox" width="60"></vxe-column>
 </m-table>


<script setup lang="ts">
  const fileList = ref<SysFiles[]>([])
const allSelectData = ref<SysFiles[]>([]) //缓存所有选中数据，每次刷



//获取数据
const getFilesDatasList = () => {
  loading.value = true
  const params = {
    page_no: page.value.page_no,
    page_size: page.value.page_size
  }
  getFileList(params).then((data) => {
    loading.value = false
    const ids = allSelectData.value.map((m: SysFiles) => m.id)
    fileList.value = data.list || []
    page.value.total = data.total || 0
    if (allSelectData.value.length > 0) {
      nextTick(() => {
        fileList.value.forEach(f => {
          if (ids.includes(f.id)) {
            toggleSelectRow(f)
          }
        })
      })
    }
  })
}

const xTable = ref()
/**全选 */
/**表格复选框是件 */
const selectChangeEvent: VxeTableEvents.CheckboxChange = ({ checked, row }) => {
  const $table = xTable.value
  if ($table && $table.MTable) {
    if (checked) {
      addCheckFile([row])
    } else {
      delCheckFile([row])
    }
  }
}
const selectAllChangeEvent: VxeTableEvents.CheckboxChange = ({ checked, row }) => {
  const $table = xTable.value
  if ($table && $table.MTable) {
    const records = $table.MTable.getCheckboxRecords()
    if (checked) {
      addCheckFile(records)
    } else {
      delCheckFile(fileList.value)
    }
  }
}
// 表格回填选中
const toggleSelectRow = (row: SysFiles) => {
  const $table = xTable.value
  if ($table && $table.MTable) {
    $table.MTable.toggleCheckboxRow(row)
  }
}

</script>

发现一个api，可以配置记住跨页选中，记录一下

<template>
 <m-table :e-height="tableHeight" :row-config="{ isHover: true, keyField: 'id' }"
          :checkbox-config="{ reserve: true }"  show-overflow :data="tableData" ref="xTable" border >
          <vxe-column type="checkbox" width="60"></vxe-column>
</m-table>
</template>

<script  setup lang="ts">
  function getSelected() {
  const $table = xTable.value
  if ($table && $table.MTable) {
    const currentCheck = $table.MTable.getCheckboxRecords()
    const otherCheck = $table.MTable.getCheckboxReserveRecords()
    const records = [...currentCheck, ...otherCheck]
    console.log(records)//全部选中的数据
  }
}
</script>