项目场景:
将 element-ui 中分页封装成公共组件描述:
admin后台中会有很多的表格以及分页的应用,所以考虑将分页分装成公共组件
<!--封装组件 vue页面-->
<!--
1. background 是否为分页按钮添加背景色 接受boolean类型
2. current-page 当前页数,支持 .sync 修饰符 接受类型 number
3. page-size 每页显示条目个数,支持 .sync 修饰符 number
4. page-sizes 每页显示个数选择器的选项设置 number[] — [10, 20, 30, 40, 50, 100]
5. total 总条目数 number
6. size-change pageSize 改变时会触发
7. current-change currentPage 改变时会触发
-->
<template>
<div>
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 20
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50]
}
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
background: {
type: Boolean,
default: true
},
},
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)
}
}
},
methods: {
handleSizeChange(val) {
//this.$emit('pagination', { page: this.currentPage, limit: val })
this.$emit('pagination')
},
handleCurrentChange(val) {
//this.$emit('pagination', { page: val, limit: this.pageSize })
this.$emit('pagination')
}
}
}
</script>
<!-- main.js引用 !-->
import Pagination from "@/components/Pagination";
// 全局组件挂载
Vue.component('Pagination', Pagination)
<!-- 父页面引用 !-->
<template>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</template>
<script>
export default {
data() {
return {
total: 0,
queryParams: {
pageNum:1,
pageSize:10
},
}
},
mounted(){
this.getList()
},
methods:{
getList(){
//表格接口
}
}
</script>