Vue开发——封装分页组件

最新推荐文章于 2024-06-19 10:54:10 发布

guanguan0_0

最新推荐文章于 2024-06-19 10:54:10 发布

阅读量1.8k

点赞数 1

分类专栏： Vue 文章标签： vue 分页组件

本文链接：https://blog.csdn.net/guanguan0_0/article/details/80355038

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

使用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>

使用创建的分页组件

// 页码切换

pageChange(item) {

this.searchContent.page = item.page;

this.searchContent.limit = item.limit;

this.getList();