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();
},

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/guanguan0_0/article/details/80355038
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭