vue-cli安装element-ui及分页组件使用

vue-cli安装element-ui并使用分页组件

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

使用npm或者cnpm(淘宝镜像)执行下面命令即可安装

npm install element-ui -S

在main.js中引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

即可正常使用element-ui及相关组件,也可根据官方文档按需引入

---

element-ui分页组件:

方法一 数据绑在div上:

<template>
<div>
   <div v-for="(value,index) in info.slice((currentPage- 
    1)*pagesize,currentPage*pagesize)">
          ...
   </div>
   <el-pagination
    layout="prev, pager, next"
    :page-size="5"    //每页多少条数据
     @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:[],//数据
             currentPage:1  //默认当前页为第一页
         }
     },
     methods:{
         current_change(){  //改变当前页
             this.currentPage = currentPage
         }
     },
     mounted(){  //如果使用数据接口
         axios.get('/api',{
             params:{
                  //请求参数
             }
         }).then(res => {
             this.info = res.data //赋值
         })
     }
}
</script>

方法二 数据绑在el-table上:

<template>
<div>
   <el-table :data="info.slice((currentPage-1)*pagesize,currentPage*pagesize)"></el-table>
   <el-pagination
    layout="prev, pager, next"
    :page-size="5"    //每页多少条数据
     @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:[],//数据
             currentPage:1  //默认当前页为第一页
         }
     },
     methods:{
         current_change(){  //改变当前页
             this.currentPage = currentPage
         }
     },
     mounted(){  //如果使用数据接口
         axios.get('/api',{
             params:{
                  //请求参数
             }
         }).then(res => {
             this.info = res.data //赋值
         })
     }
}
</script>

以上安装部分的内容和组件使用方法来源于element-ui官方文档,分页组件的el-table数据绑定方法来源于网络。

上面的方法实现有点笨拙,根据实际情况可使用其他更好、更高效的方法。

注:分页组件的难点在于如何绑数据