ElementUI 表格分页组件

原创已于 2022-03-08 09:21:34 修改 · 507 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js

于 2022-03-07 15:15:49 首次发布

vue 专栏收录该内容

10 篇文章

订阅专栏

本文档详细介绍了如何在ElementUI中使用分页组件，并展示了如何通过`handleSizeChange`和`handleCurrentChange`方法处理分页大小和当前页的变化。同时，讲解了如何通过props和事件传递参数以实现组件间的交互。

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

ElementUI 表格分页组件

<template>
  <div class="pagination">
    <el-pagination
      background
      :current-page="currentpage"
      :page-sizes="pagesizelist"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
export default {
  props: {
    currentpage: {
      type: Number,
      required: true
    },
    pagesizelist: {
      type: Array,
      required: true
    },
    pagesize: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('handleSize', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrent', val)
    }
  }
}
</script>

<style scoped></style>

引用

<pagination 
	:currentpage="currentPage" 
	:pagesizelist="pageSizeList" 
	:pagesize="pageSize" 
	:total="total" 
	@handleSize="handleSize" 
	@handleCurrent="handleCurrent" 
/>