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>

注意:绑定的事件后不要跟括号,要不没有默认参数。。。

猜你喜欢

转载自www.cnblogs.com/fqh123/p/10941291.html