vue中使用elementUi （分頁器的使用）

1、安裝

npm i element-ui -S

2、在main.js中引入

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

Vue.use(ElementUI)

中文文檔地址：

http://element-cn.eleme.io/#/zh-CN/component/quickstart

 

分頁器的使用：

<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>

注意：綁定的事件后不要跟括號，要不沒有默認參數。。。

 

不過:pager-count="11"和total一起用的話，會報個錯，所以我只用了total   為了適配移動端，把small頁用上了