vue项目中使用element的分页功能
根据element-ui的官方文档 官网地址:http://element.eleme.io/#/zh-CN
首先安装该组件
1 npm install element-ui -S
在main.js中引入
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>
