Vxe-Table 实现分页多选与增删改查数据获取的综合方案

在基于 Vxe-Table 开发数据表格功能时，开发者经常需要同时实现分页、多选以及通过 getRecordset API 获取增删改数据这三个核心功能。本文将详细介绍如何优雅地组合这些功能，解决实际开发中的常见问题。

核心功能需求分析

首先我们需要明确三个核心功能的技术要点：

1. 分页功能：需要正确处理客户端分页与服务端分页的区别
2. 多选功能：需要维护跨页选择的状态
3. 数据变更追踪：通过 getRecordset 获取增删改的数据集合

完整实现方案

基础表格配置

<vxe-table
  ref="xTable"
  border
  height="500"
  :data="tableData"
  :checkbox-config="{ checkField: 'checked', checkRowKey: 'id' }"
  :pager-config="pagerConfig"
  @checkbox-change="handleCheckboxChange"
  @checkbox-all="handleCheckboxAll"
>
  <vxe-column type="checkbox" width="60"></vxe-column>
  <!-- 其他列配置 -->
</vxe-table>

<vxe-pager
  :current-page="pagerConfig.currentPage"
  :page-size="pagerConfig.pageSize"
  :total="pagerConfig.total"
  @page-change="handlePageChange"
></vxe-pager>

数据状态管理

data() {
  return {
    tableData: [], // 当前页数据
    allData: [],   // 全量数据（客户端分页时使用）
    pagerConfig: {
      currentPage: 1,
      pageSize: 10,
      total: 0
    },
    selectedIds: new Set(), // 存储所有选中项的ID
    // 其他数据...
  }
}

分页处理实现

对于分页处理，需要区分客户端分页和服务端分页两种场景：

客户端分页实现：

methods: {
  loadData() {
    // 模拟从API获取数据
    fetchData().then(res => {
      this.allData = res.data
      this.pagerConfig.total = res.data.length
      this.updatePageData()
    })
  },
  
  updatePageData() {
    const { currentPage, pageSize } = this.pagerConfig
    const start = (currentPage - 1) * pageSize
    const end = start + pageSize
    this.tableData = this.allData.slice(start, end)
    
    // 同步选中状态
    this.tableData.forEach(row => {
      this.$set(row, 'checked', this.selectedIds.has(row.id))
    })
  },
  
  handlePageChange({ currentPage, pageSize }) {
    this.pagerConfig.currentPage = currentPage
    this.pagerConfig.pageSize = pageSize
    this.updatePageData()
  }
}

服务端分页实现：

methods: {
  loadData() {
    const { currentPage, pageSize } = this.pagerConfig
    fetchData({ page: currentPage, size: pageSize }).then(res => {
      this.tableData = res.data
      this.pagerConfig.total = res.total
      
      // 同步选中状态
      this.tableData.forEach(row => {
        this.$set(row, 'checked', this.selectedIds.has(row.id))
      })
    })
  },
  
  handlePageChange({ currentPage, pageSize }) {
    this.pagerConfig.currentPage = currentPage
    this.pagerConfig.pageSize = pageSize
    this.loadData()
  }
}

多选功能实现

跨页选择是常见的需求难点，需要特别处理：

methods: {
  handleCheckboxChange({ records }) {
    records.forEach(record => {
      if (record.checked) {
        this.selectedIds.add(record.id)
      } else {
        this.selectedIds.delete(record.id)
      }
    })
  },
  
  handleCheckboxAll({ records, checked }) {
    records.forEach(record => {
      if (checked) {
        this.selectedIds.add(record.id)
      } else {
        this.selectedIds.delete(record.id)
      }
    })
  },
  
  // 获取所有选中项（包括不在当前页的）
  getAllSelectedRows() {
    return this.allData.filter(row => this.selectedIds.has(row.id))
  }
}

增删改数据获取

通过 getRecordset API 获取变更数据时，需要注意分页场景下的数据处理：

methods: {
  getChangedData() {
    const recordset = this.$refs.xTable.getRecordset()
    
    // 处理新增数据
    const insertRecords = recordset.insertRecords
    
    // 处理删除数据
    const removeRecords = recordset.removeRecords
    
    // 处理更新数据
    const updateRecords = recordset.updateRecords
    
    // 在分页场景下，需要特别注意：
    // 1. 删除的数据可能不在当前页
    // 2. 更新的数据可能跨页
    
    // 返回处理后的数据
    return {
      inserted: insertRecords,
      deleted: removeRecords,
      updated: updateRecords,
      // 可以额外返回所有选中项
      selected: this.getAllSelectedRows()
    }
  },
  
  saveData() {
    const changedData = this.getChangedData()
    // 发送到后端处理...
  }
}

关键问题解决方案

1. 分页与getRecordset的兼容问题：

   • 对于客户端分页，getRecordset只能获取当前页的变更
   • 解决方案是维护一个全量数据的副本，在处理变更时进行映射

2. 跨页选择状态维护：

   • 使用Set存储选中项的ID而非直接引用行数据
   • 切换分页时重新设置行的选中状态

3. 性能优化建议：

   • 大数据量时推荐使用服务端分页
   • 对于选择状态，可以使用位图等更高效的数据结构

最佳实践建议

1. 明确分页模式：在项目初期就确定使用客户端分页还是服务端分页，两者的实现差异较大

2. 状态管理：对于复杂场景，建议将表格状态（选中项、分页信息等）提升到Vuex等状态管理库中

3. 数据一致性：任何对数据的修改都要同步更新到全量数据副本和当前页数据

4. 性能监控：在开发过程中注意监控表格渲染性能，特别是当数据量较大时

通过以上方案，开发者可以在Vxe-Table中完美实现分页、多选和数据变更追踪的组合功能，满足大多数业务场景的需求。