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

1   npm install element-ui -S

 1 import Vue from 'vue';
 2 import ElementUI from 'element-ui';
 3 import 'element-ui/lib/theme-chalk/index.css';
 4 import App from './App.vue';
 5  
 6 Vue.use(ElementUI);
 7  
 8 new Vue({
 9   el: '#app',
10   render: h => h(App)
11 });

 1 <template>
 2 <div>
 3    <div v-for="(value,index) in info.slice((currentPage- 
 4     1)*pagesize,currentPage*pagesize)">
 5           ...
 6    </div>
 7    <el-pagination
 8     layout="prev, pager, next"
 9     :page-size="pagesize"    //每页多少条数据
10      @current-change="current_change" //currentPage改变时会触发
11      :current-page.sync="currentPage" //当前页
12      :pager-count="5" //页码按钮数量
13      :total="info.length"> //total总共多少条数据 
14    </el-pagination>
15 </div>
16 </template>
17  
18  
19  
20 <script>
21 export default {
22      data(){
23          return{
24              info:[],//数据
25              pagesize:5,//每页多少数据
26              currentPage:1  //默认当前页为第一页
27          }
28      },
29      methods:{
30          current_change(currentPage){  //改变当前页
31              this.currentPage = currentPage
32          }
33      },
34      mounted(){  //如果使用数据接口
35          axios.get('/api',{
36              params:{
37                   //请求参数
38              }
39          }).then(res => {
40              this.info = res.data //赋值
41          })
42      }
43 }
44 </script>