vue-element-admin-template 分頁組件實現

低調的D吖

于 2020-01-16 18:25:56 发布

阅读量492

点赞数

分类专栏： js vue

本文链接：https://blog.csdn.net/software20121216/article/details/104009323

版权

本文介绍如何利用Element UI的pagination组件进行二次封装，详细阐述在Vue.js项目中实现分页功能的过程。通过计算属性响应pageSize和currentPage的变化，并绑定size-change和current-change事件，确保数据的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分頁組件實現，使用element 的pagination組件進行再一次封裝

https://element.eleme.io/#/zh-CN/component/pagination#

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
    :background="background"
    :current-page.sync="currentPage"
    :pag-size.sync="pageSize"
    :layout="layout"
    :page-sizes="pageSizes"
    :total="total"
    v-bind="$attrs"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  </div>
</template>

使用計算屬性更改pageSize 改變時會觸發事件size-change或者currentPage 改變時會觸發current-change

  computed: {
    currentPage: {
      get() {
        return this.page
      },

最低0.47元/天解锁文章