vue手动实现分页表格

手动实现分页表格的方法

数据分页处理
通过计算总页数和当前页数据范围实现分页。假设原始数据为tableData，每页显示pageSize条数据：

computed: {
  totalPages() {
    return Math.ceil(this.tableData.length / this.pageSize);
  },
  currentPageData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.tableData.slice(start, end);
  }
}

分页控件实现
创建分页按钮组件，绑定页码切换事件：

<div class="pagination">
  <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
  <span v-for="page in totalPages" :key="page">
    <button @click="currentPage = page">{{ page }}</button>
  </span>
  <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>

表格渲染
使用计算属性currentPageData渲染当前页数据：

<table>
  <tr v-for="item in currentPageData" :key="item.id">
    <td>{{ item.name }}</td>
    <td>{{ item.value }}</td>
  </tr>
</table>

状态管理
在data中定义分页相关变量：

data() {
  return {
    tableData: [], // 原始数据
    currentPage: 1,
    pageSize: 10
  }
}

样式优化
为分页按钮添加CSS样式增强交互：

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
}
.pagination button:disabled {
  opacity: 0.5;
}