1.首先定义一个分页子组件
<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" //显示第几页
/>
2.定义props 接受父组件传过来的值 代码如下:
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1 //默认第一页
},
limit: {
type: Number,
default: 20 //默认每页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
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
},
3.在定义2个计算属性 一个为当前页多少条数据,一个为第几页,因为会改变这2个值 所以设置了set属性
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) //改变的当前页几条数据的值赋值给父组件
}
}
},
4.在定义2个方法 一个改变页数,一个当前页多少条数据
methods: {
handleSizeChange(val) {
this.$emit('pagination', { pageIndex: 1, pageSize: val })
},
handleCurrentChange(val) {
this.$emit('pagination', { pageIndex: val, pageSize: this.pageSize })
}
}
5.然后在父组件 注册 引用
import Pagination from '@/components/Pagination'
export default {
components: { Pagination},
data() {
return {
length: 0,
pageSize: 20, //要传过去的数据 每页多少条数据
pageIndex: 1, //要传过去的数据 第几页
}
},
6.父组件 使用子组件 并接受子组件传回的事件
<pagination v-show="length>0" :total="length" :page.sync="pageIndex"
:limit.sync="pageSize" @pagination="handlePageChange"/>
handlePageChange(data) {
this.pageIndex = data.pageIndex
this.pageSize = data.pageSize
this.loadData()//这是重新获取数据的方法
}