Vue开发之封装分页组件与使用示例

本文实例讲述了Vue开发之封装分页组件与使用。分享给大家供大家参考，具体如下：使用ele

本文实例讲述了Vue开发之封装分页组件与使用。分享给大家供大家参考，具体如下：

使用elementui中的el-pagination来封装分页组件

pagination.vue:

<template>
 <div class="pagination">
 <el-pagination small class="text-center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
 :current-page="page.page" :page-sizes="pageSizes" :page-size="page.limit"
 layout="total, sizes, prev, pager, next, jumper" :total="total">
 </el-pagination>
 </div>
</template>
<script>
export default {
 props: {
 total: {
 type: Number
 } // 总条数
 },
 data() {
 return {
 pageSizes: [10, 20, 50, 100],
 page: {
 page: 1,
 limit: 10
 }
 };
 },
 methods: {
 // 每页条数变更
 handleSizeChange(val) {
 this.page.limit = val;
 this.$emit('pageChange', this.page);
 },
 // 当前页码变更
 handleCurrentChange(val) {
 this.page.page = val;
 this.$emit('pageChange', this.page);
 }
 }
}
</script>
<style>
.pagination {
 margin: 20px 0;
}
</style>

使用创建的分页组件

<pagination :total="total" @pageChange="pageChange"></pagination>

// 页码切换
pageChange(item) {
 this.searchContent.page = item.page;
 this.searchContent.limit = item.limit;
 this.getList();
},

希望本文所述对大家vue.js程序设计有所帮助。

Vue封装 分页组件