npm i element-ui -S

import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘

Vue.use(ElementUI)

<template>
    <div class="paginationBox">
        <div class="block">
            <span class="demonstration">大于 7 页时的效果</span>
            <el-pagination
                background
                :page-sizes="[5, 10, 15, 20]"
                :page-size="10"
                :pager-count="11"
                layout="sizes,prev, pager, next,jumper"
                :current-page="currentPage"
                hide-on-single-page
                @size-change="sizePageChange"
                @current-change="currentChange"
                @prev-click="pre"
                @next-click="next"
                :total="1000">
            </el-pagination>
        </div>


        

    </div>
</template>

<script>
export default {
    data(){
        return{
            currentPage:3
        }
    },
    methods:{
        sizePageChange(curSize){
            console.log(curSize)
        },
        currentChange(cpage){
            this.currentPage=cpage;
            console.log(this.currentPage)
        },
        pre(cpage){
            console.log(cpage)
        },
        next(cpage){
            console.log(cpage)
        }
    }
}
</script>

<style scoped>
    


</style>