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

最新推荐文章于 2023-03-11 20:21:53 发布

低調的D吖

最新推荐文章于 2023-03-11 20:21:53 发布

阅读量492

点赞数

分类专栏： js vue

本文链接：https://blog.youkuaiyun.com/software20121216/article/details/104009323

版权

vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

29 篇文章

订阅专栏

本文介绍如何利用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
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },

當改變pageSize或者currentPage 觸發size-change或者current-change 綁定事件

methods:{
    handleSizeChange(val) {

      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        this.pageSize = val
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      // this.$emit('update:page', val)
      // this.$emit('update:limit', this.pageSize)

      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0,800)
      }
    }
  }


//在使用的地方引用並使用

import Pagination from '@/components/Pagination'

<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData"></pagination>