Vue基础语法如何实现带分页功能的表格数据展示组件

借助Vue的基础语法，就能把一个分页表格做得既可控又方便排查问题：先定义currentPage、pageSize、total、tableData这些响应式状态；再通过计算属性配合slice对allData进行动态截取，生成当前页要展示的数据；页码和每页条数用v-model完成绑定，@current-change与@size-change负责在变更时触发数据更新；最后，表格部分通过v-for渲染，并为每一项设置唯一的key。

用 Vue 基础语法完成带分页的表格组件，关键是把“数据获取”“页码控制”“渲染逻辑”三块拆清楚，不依赖第三方 UI 库也能跑通。关键并非写得多，而是每一步都可控、可调试。

数据与分页状态要响应式管理

先在 data 中定义必需的状态变量：当前页码、每页条数、总条数、表格数据数组。这些必须是响应式的，Vue 才能自动更新视图。

• currentPage：从 1 开始，代表当前第几页（不是索引）
• pageSize：每页显示多少条，比如 10
• total：后端返回的总记录数，用于计算总页数
• tableData：当前页要展示的数据（不是全部原始数据）

分页逻辑靠计算属性或方法切片

原始数据（比如从 API 拿到的全部列表）存在 allData 里，tableData 不直接赋值，而是通过计算属性动态截取：

• 起始索引：(currentPage - 1) * pageSize
• 结束索引：currentPage * pageSize
• 用 allData.slice(start, end) 得到当前页数据

如此改页码或改每页数量时，tableData 自动刷新，不用手动调用 render 做法。

分页器交互绑定 v-model + 事件监听

使用原生 （Element Plus）或手写简易分页按钮，都要绑定两个核心：

• v-model:current-page → 同步 currentPage 变量
• v-model:page-size → 同步 pageSize 变量
• @current-change → 触发重新请求或切换本地数据
• @size-change → 同样触发数据重切，通常也重置 currentPage 到第 1 页

注意：如果数据是前端静态列表，改页码只需更新变量；如果是后端分页，这两个事件里要调用接口，传 currentPage 和 pageSize 参数。

具体来说，表格结构用 v-for 渲染，配合 key 保证正确性

表格主体用 v-for 遍历 tableData，每一行加 :key="item.id"（或唯一字段），避免复用错乱：

• 表头用固定 或循环 v-for 配置列名
• 单元格内容直接插值，如 {{ row.name }}
• 需要格式化？用过滤器或内联函数，比如 {{ formatDate(row.date) }}

不需额外封装复杂逻辑，基础语法足够支撑清晰、可维护的分页表格。