vue表格分页如何实现

Vue表格分页的实现方法

在Vue中实现表格分页通常需要结合前端分页或后端分页逻辑，以下分别介绍两种实现方式：

前端分页实现

1. 准备数据与分页参数 定义表格数据和分页相关变量，通常包括当前页码、每页条数、总条数等。

   data() {
     return {
       tableData: [], // 全部数据
       currentPage: 1, // 当前页码
       pageSize: 10, // 每页条数
       total: 0 // 总条数
     }
   }

2. 计算当前页数据 使用计算属性或方法过滤出当前页需要显示的数据。

   computed: {
     paginatedData() {
       const start = (this.currentPage - 1) * this.pageSize
       const end = start + this.pageSize
       return this.tableData.slice(start, end)
     }
   }

3. 渲染分页组件 在模板中使用el-pagination（Element UI）或其他分页组件。

   

   <el-table :data="paginatedData">
     <!-- 表格列定义 -->
   </el-table>
   <el-pagination
     @current-change="handleCurrentChange"
     :current-page="currentPage"
     :page-size="pageSize"
     :total="total"
     layout="total, prev, pager, next">
   </el-pagination>

4. 处理页码变化 实现页码切换时的回调函数。

   methods: {
     handleCurrentChange(val) {
       this.currentPage = val
     }
   }

后端分页实现

1. 定义分页参数 在data中定义分页相关变量。

   

   data() {
     return {
       tableData: [], // 当前页数据
       currentPage: 1,
       pageSize: 10,
       total: 0
     }
   }

2. 请求分页数据 在方法中调用API接口获取分页数据。

   methods: {
     fetchData() {
       const params = {
         page: this.currentPage,
         size: this.pageSize
       }
       api.getList(params).then(res => {
         this.tableData = res.data.list
         this.total = res.data.total
       })
     }
   }

3. 渲染分页组件 与前端分页类似，但数据直接来自后端。

   <el-table :data="tableData">
     <!-- 表格列定义 -->
   </el-table>
   <el-pagination
     @current-change="handleCurrentChange"
     :current-page="currentPage"
     :page-size="pageSize"
     :total="total"
     layout="total, prev, pager, next">
   </el-pagination>

4. 处理页码变化 页码变化时重新请求数据。

   methods: {
     handleCurrentChange(val) {
       this.currentPage = val
       this.fetchData()
     }
   }

注意事项

• 前端分页适合数据量较小的情况（通常小于1000条）
• 后端分页适合大数据量场景，能减轻前端性能压力
• 分页组件样式可根据使用的UI库（如Element UI、Ant Design Vue等）调整
• 可添加每页条数切换功能，通过监听size-change事件实现