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页用上了