Vue如何获取表格组件的当前页数据？

Question

在使用 Vue 开发数据表格功能时，常通过分页方式展示大量数据。开发者通常会使用 Element Plus、Ant Design Vue 或自定义封装的表格组件。一个常见问题是：**如何准确获取当前页显示的数据列表？** 当用户切换页码或调整每页条数时，前端可能仅更新了 pagination 组件的状态，但未同步刷新表格数据源，导致无法正确获取当前页的实际渲染数据。尤其在本地分页场景中，若未对原始数据进行 slice 处理，直接读取原始数组将返回全部数据而非当前页内容。如何在页面变更后及时获取当前页的可见数据，并确保数据与视图一致？

Answer 1

1. 问题背景与常见误区

在 Vue 开发中，数据表格是企业级应用的核心组件之一。当处理大量数据时，分页成为标配功能。开发者常使用 Element Plus 的 <el-table> 配合 <el-pagination>，或 Ant Design Vue 的 a-table 与 a-pagination 组合实现分页展示。

然而，一个高频出现的问题是：**如何准确获取当前页实际渲染的数据列表？** 许多开发者误以为通过绑定 current-page 和 page-size 即可自动同步视图与数据，但实际上，仅更新分页状态而不对原始数据进行切片（slice），会导致以下问题：

• 直接访问原始数据数组，返回的是全部数据而非当前页；
• 在本地分页场景下，tableData 若未根据当前页码动态计算，则视图与逻辑脱节；
• 用户操作后调用“获取选中行”等功能时，可能基于错误的数据集进行处理。

场景	数据源类型	是否需手动 slice	典型错误行为
本地分页	前端全量数据	是	直接遍历原始数组
远程分页	API 分页返回	否	缓存未清理导致脏数据
混合模式	局部缓存 + 请求	部分	索引错位
虚拟滚动 + 分页	动态加载块	是	越界读取
带筛选的本地分页	过滤后数据	是	未先过滤再分页
树形结构分页	扁平化节点	是	父子节点断裂
多表联动	共享状态源	是	状态未同步
导出当前页	rendered rows	是	导出全部数据
跨页选择记忆	selected map	否	重复添加
排序+分页组合	预处理序列	是	排序未持久化

2. 核心机制解析：视图与数据同步原理

Vue 的响应式系统依赖于数据劫持（defineProperty 或 Proxy），当 currentPage 或 pageSize 变化时，若未触发相关 computed 属性更新，则无法驱动视图重新计算。

以 Element Plus 为例，其 <el-table :data="pagedData"> 中的 data 必须是一个响应式引用。正确的做法是将分页逻辑封装在 computed 中：

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      rawData: [/* 全量数据 */]
    }
  },
  computed: {
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.rawData.slice(start, end);
    }
  }
}

此时，只要 currentPage 或 pageSize 更新，pagedData 就会重新求值，确保表格渲染的是当前页数据。

此外，在用户切换页码时，应监听 pagination 的 @current-change 或 @size-change 事件，并更新对应变量：

<el-pagination
  :current-page="currentPage"
  :page-size="pageSize"
  @current-change="handleCurrentChange"
  @size-change="handleSizeChange"
/>

methods: {
  handleCurrentChange(page) {
    this.currentPage = page;
  },
  handleSizeChange(size) {
    this.pageSize = size;
    this.currentPage = 1; // 通常重置为第一页
  }
}

3. 深层陷阱与最佳实践路径

即便实现了基础的 slice 逻辑，仍存在多个深层陷阱影响数据一致性：

1. 异步更新延迟：Vue 的 DOM 更新是异步的，若在事件回调中立即读取 DOM 或执行 getSelectionRows()，可能获取的是旧数据。
2. 过滤与排序顺序错误：应在分页前完成搜索过滤和排序，否则会出现“第一页显示不全结果”等问题。
3. 跨页选择状态丢失：使用 toggleRowSelection 时，翻页后原选中行消失，需维护全局选中 ID 映射。
4. 远程分页缓存污染：前后端分页参数不一致或未清空 previous data，导致数据显示混乱。
5. 性能瓶颈：对上万条数据做前端 slice 虽然可行，但频繁 reactivity 追踪可能导致卡顿，建议结合虚拟滚动。

为解决上述问题，推荐采用如下架构设计模式：

graph TD A[用户操作: 切换页码/条数] --> B{判断分页类型} B -->|本地分页| C[更新 currentPage/pageSize] B -->|远程分页| D[发起 API 请求] C --> E[computed 自动 slice rawData] D --> F[接收分页响应数据] E --> G[绑定到 table:data] F --> G G --> H[视图刷新] H --> I[提供 getCurrentPageData() 方法] I --> J[对外暴露当前页可见行]

4. 封装通用解决方案与高级技巧

为了提升复用性，可封装一个通用的分页控制器 mixin 或 Composition API 函数：

// usePaging.js
import { ref, computed, watch } from 'vue';

export function usePaging(sourceData, config = {}) {
  const {
    initialPage = 1,
    initialSize = 10,
    autoSync = true
  } = config;

  const currentPage = ref(initialPage);
  const pageSize = ref(initialSize);

  const total = computed(() => sourceData.value.length);

  const pagedData = computed(() => {
    if (!autoSync) return sourceData.value;
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return sourceData.value.slice(start, end);
  });

  const setPagination = (page, size) => {
    currentPage.value = page;
    if (size !== undefined) pageSize.value = size;
  };

  const getCurrentPageData = () => {
    return pagedData.value;
  };

  // 可选：监听源数据变化重置页码
  watch(sourceData, () => {
    if (currentPage.value > Math.ceil(total.value / pageSize.value)) {
      currentPage.value = 1;
    }
  });

  return {
    currentPage,
    pageSize,
    total,
    pagedData,
    setPagination,
    getCurrentPageData
  };
}

在组件中使用：

import { usePaging } from './usePaging';
import { ref, watch } from 'vue';

const rawData = ref([...]); // 响应式数据源
const { pagedData, currentPage, pageSize, getCurrentPageData } = usePaging(rawData);

// 外部调用
const exportCurrentPage = () => {
  console.log('导出当前页:', getCurrentPageData());
};

该方案具备以下优势：

• 逻辑解耦，易于测试；
• 支持动态配置分页参数；
• 提供显式 API 获取当前页数据；
• 兼容 Vue 3 的 Composition API 风格；
• 可通过扩展支持排序、过滤等复合逻辑。