对于Element-ui分页进行再次的封装使用
这是我项目的分页的目录结构,话不多说,直接上代码。
<template> <div class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </template> <script> export default { name: 'Pagination', props: { total: { required: true, type: Number }, page: { type: Number, default: 0 }, limit: { type: Number, default: 10 }, pageSizes: { type: Array, default () { return [7, 14] } }, layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' }, background: { type: Boolean, default: true } }, computed: { currentPage: { get () { return this.page }, set (val) { if (val > 0) { this.$emit('update:page', val - 1) } else { this.$emit('update:page', val) } } }, pageSize: { get () { return this.limit }, set (val) { this.$emit('update:limit', val) } } }, methods: { handleSizeChange (val) { this.$emit('pagination', { page: this.currentPage, limit: val }) }, handleCurrentChange (val) { this.$emit('pagination', { page: val, limit: this.pageSize }) } } } </script> <style scoped> .pagination-container { background: #fff; padding: 10px 16px; } </style>
调用方法:
<Pagination v-if="page.total > 0" :total="page.total" :page="page.curPage" :limit="page.size" @pagination="pageChange"/> import Pagination from '@/components/Pagination' export default { name: '', components: { Pagination } data() { return { // 具体还需要根据自己需求来做 page: { total: '', size: 7, curPage: 1 } } }, methdos: { pageChange(cur) { this.refreshTable(cur.page, cur.limit) // 刷新表格,把值传给后台 } } }
希望大佬看到有不对的地方,提出博主予以改正!