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

用Vue基础语法可实现可控可调试的分页表格：定义currentPage、pageSize、total、tableData响应式状态；通过计算属性用slice动态截取allData生成当前页数据；v-model绑定页码与每页条数，@current-change和@size-change触发数据更新；表格用v-for渲染并设唯一key。

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

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

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

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

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

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

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

这样改页码或改每页数量时，tableData 自动刷新，不用手动调用 render 方法。

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

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

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

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

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

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

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

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