<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
时间: 2025-06-29 12:03:52 浏览: 9
### 实现Vue分页组件
为了创建一个功能齐全的分页组件,在 Vue 项目中可以定义一个新的组件 `Pagination.vue`,该组件接收总数 (`total`)、当前页面 (`page`) 和每页显示条目数 (`limit`) 的属性,并处理翻页事件。
#### 组件模板结构
```html
<template>
<div class="pagination">
<button :disabled="page === 1" @click="$emit('change', page - 1)">Previous</button>
Page {{ page }} of {{ totalPages }}
<button :disabled="page >= totalPages" @click="$emit('change', page + 1)">Next</button>
</div>
</template>
<script>
export default {
props: {
total: { type: Number, required: true },
page: { type: Number, default: 1 },
limit: { type: Number, default: 10 }
},
computed: {
totalPages() {
return Math.ceil(this.total / this.limit);
}
}
};
</script>
```
此代码片段展示了如何构建一个简单的分页控件[^1]。通过计算总共有多少页(`totalPages`)来决定是否禁用前后按钮以及更新界面上显示的文字说明。
#### 使用方式
要在其他地方使用这个自定义分页器,只需将其作为子组件引入并传递必要的参数即可:
```html
<Pagination
:total="items.length"
:page.sync="currentPage"
:limit="pageSize"
@change="handlePageChange"
/>
```
这里假设有一个名为 `items` 的数组代表数据源列表;`currentPage` 表示当前选中的页码;而 `pageSize` 则指定了每一页应该展示的数据量大小。当点击上一页或下一页时触发父级方法 `handlePageChange()` 来响应用户的交互操作。
阅读全文
相关推荐



















