vue项目中使用element的分页功能

根据element-ui的官方文档     官网地址:http://element.eleme.io/#/zh-CN 

首先安装该组件

  npm install element-ui -S

在main.js中引入

import Vue from 'vue';
 2 import ElementUI from 'element-ui';
 3 import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

在页面中使用

<template>
<div>
   <div v-for="(value,index) in info.slice((currentPage- 
 4     1)*pagesize,currentPage*pagesize)">
          ...
   </div>
   <el-pagination
    layout="prev, pager, next"
    :page-size="pagesize"    //每页多少条数据
     @current-change="current_change" //currentPage改变时会触发
     :current-page.sync="currentPage" //当前页
     :pager-count="5" //页码按钮数量
     :total="info.length"> //total总共多少条数据 
   </el-pagination>
</div>
</template>
 
 
 
<script>
export default {
     data(){
         return{
             info:[],//数据
             pagesize:5,//每页多少数据
             currentPage:1  //默认当前页为第一页
         }
     },
     methods:{
         current_change(currentPage){  //改变当前页
             this.currentPage = currentPage
         }
     },
     mounted(){  //如果使用数据接口
         axios.get('/api',{
             params:{
                  //请求参数
             }
         }).then(res => {
             this.info = res.data //赋值
         })
     }
}
</script>