elementUI分页封装

最新推荐文章于 2024-07-09 14:00:46 发布

小胡仙

最新推荐文章于 2024-07-09 14:00:46 发布

阅读量510

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： elementUI vue

本文链接：https://blog.youkuaiyun.com/weixin_44436078/article/details/88989570

笔记专栏收录该内容

42 篇文章

订阅专栏

本文介绍 Element UI 分页组件的配置与使用方法，包括页面布局、大小选择、当前页码变化监听等功能，并展示了如何通过 props 控制分页组件的行为。

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

<template>
  <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="curPage"
    :page-size="pageSize"
    :page-sizes="[10, 15, 20, 30, 40, 50, 100]"
    :layout="layout"
    :total="total"
  ></el-pagination>
</template>
<script>
export default {
  name: `pagination`,
  props: {
    pagecount: {
      type: Number,
      default: 10
    },
    pagesize: {
      type: Number,
      default: 20
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    islocalstorage: {
      type: Boolean,
      default: false
    },
    currentpage: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {}
  },
  computed: {
    total () {
      return this.pagecount
    },
    pageSize () {
      return this.pagesize
    },
    curPage () {
      return this.currentpage
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
      this.$emit('currentPage', val)
    },
    handleSizeChange (val) {
      if (this.islocalstorage) {
        localStorage.setItem('pageSize', val)
      }
      this.$emit('pageSize', val)
    }
  }
}
</script>

调用方法看这里