使用elementui中的el-pagination封装公用分页组件

/ JAVA / 0 条评论 / 370浏览

发现问题

我们平常使用Element UI的时候总是会遇到,每个页面只要有分页的,都得写一些重复的el-pagination,乃至size-changecurrent-change事件都得写一遍,如果一个页面有多个分页模块,那就更冗余了,所以我这里封装了一个组件,欢迎大家拍砖

解决问题

子组件 pagination.vue代码

<template>
<div class="pagenation">
    <el-pagination small class="text-center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNumber" :page-sizes="pageSizes" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="params.total">
    </el-pagination>
</div>
</template>

<script>
import {
  pageSizes
} from '@/constants/global'
export default {
  props: {
    // 总条数
    params: {
      type: Object
    },
    parentMethod: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      pageSizes: pageSizes
    }
  },
  methods: {
    // // 每页查看条数变化
    handleSizeChange (pageSize) {
      this.params.pageSize = pageSize
      this.parentMethod()
    },
    // 当前页码变化
    handleCurrentChange (pageNumber) {
      this.params.pageNumber = pageNumber
      this.parentMethod()
    }
  }

}
</script>

<style scoped>
.pagenation {
    margin: 20px 0;
}
</style>

父组件引用代码

<template>
<pagination :params="template.page" :parentMethod="listObject"></pagination>
</template>
<script>
import pagination from '@/components/pagination'
export default {
  name: 'systemUser',
  data () {
    return {
      template: {
        page: {
          pageNumber: 1,
          pageSize: 20,
          total: 0
        },
        data:[]
      }
    }
  },
  components: {
    pagination
  },
  mounted () {
    this.listObject()
  },
  methods: {
    listObject () {
      let params = {
        ...this.template.page
      }
      this.$http('/admin/system/user/page', params, {
        method: 'get'
      })
        .then(data => {
          let res = data.data
          this.template.data = res.list
          this.template.page.total = res.total
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    }
  }
}
</script>

参考文章:
1、vue项目 使用elementui中的el-pagination封装公用分页组件
2、Vue子组件调用父组件的方法函数