快捷導(dǎo)航

二次封裝element ui pagination組件方式

更新時間：2025年11月22日 15:11:11 作者：活寶小娜

文章總結(jié)了在Vue2中二次封裝Element UI Pagination組件的過程,包括HTML、JS和CSS部分的代碼示例,作者分享了個人經(jīng)驗,旨在為讀者提供參考,并鼓勵大家支持腳本之家

vue2中二次封裝element ui pagination組件

html部分

<template>
    <div class="table-pagination">
        <el-pagination
        :current-page.sync="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="paginationLayout"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>
</template>

js部分

<script>
export default {
    name: "DiyPagination",
    props: {
        // 分頁配置
        pagination: {
            type: Object,
            default: null
        },
    },
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0,
            pageSizes: [10, 20, 50, 100],
            paginationLayout: 'total, sizes, prev, pager, next, jumper',
        };
    },
    watch: {
        // 監(jiān)聽分頁配置變化
        pagination: {
            immediate: true,
            deep: true,
            handler(val) {
                if (val) {
                this.currentPage = val.currentPage || 1;
                this.pageSize = val.pageSize || 10;
                this.total = val.total || 0;
                this.pageSizes = val.pageSizes || [10, 20, 50, 100];
                this.paginationLayout = val.layout || 'total, sizes, prev, pager, next, jumper';
                }
            }
        }
    },
    methods: {
        // 處理分頁大小變化
        handleSizeChange(size) {
            this.pageSize = size;
            this.$emit('pagination-change', {
                pageSize: size,
                currentPage: this.currentPage
            });
        },
        // 處理當(dāng)前頁變化
        handleCurrentChange(page) {
            this.currentPage = page;
            this.$emit('pagination-change', {
                pageSize: this.pageSize,
                currentPage: page
            });
        },
    }
}
</script>

css部分

.table-pagination {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #ebeef5;
    background-color: #fff;
}

在組件中使用

<template>
<DiyPagination
            :pagination="pagination"
            @pagination-change="paginationChange"
            ></DiyPagination>
</template>

<script>
import DiyPagination from "@/components/DiyPagination/index.vue"
export default {
  components: {
    DiyPagination
  },
  data() {
    return {
      pagination: { // 表格分頁配置
        currentPage: 1,
        pageSize: 20,
        total: null,
        pageSizes: [20, 50, 100],
        layout: 'total, sizes, prev, pager, next, jumper',
       },
    }
  },
  methods: {
    paginationChange({pageSize, currentPage}) {
          this.pagination.currentPage = currentPage
          this.pagination.pageSize = pageSize
    },
  }
}
</script>