封装
<template>
<div>
<el-pagination
:current-page.sync="currentPage"
:page-size.sync="pageSize"
layout="prev, pager, next, jumper"
:total="total"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
// import { scrollTo } from '@/utils/scroll-to'
export default {
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 10
}
},
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: {
handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
}
}
}
</script>
<style>
</style>
使用
<template>
<div id="app">
<Pagination
v-show="total>0"
:total="total"
:page.sync="form.pageNum"
:limit.sync="form.pageSize"
@pagination="getData(form)"
/>
</div>
</template>
<script>
import Pagination from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
Pagination
},
data() {
return {
form: {
pageNum: 1,
pageSize: 10
},
total: 200,
}
},
methods: {
getData(val) {
this.form.pageNum = val.pageNum
// 调接口
},
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>