vue项目使用element ui分页器

一：在项目中下载并且引入element ui --- element ui

(1) : 下载

npm i element-ui -S

(2) : 在vue项目man.js中引入挂载上element ui及其样式

import ElementUI from 'element-ui'   //element ui
import 'element-ui/lib/theme-chalk/index.css'  //css样式
Vue.use(ElementUI, {size:"small"   //size是指按钮});  //挂载

二：在要使用的组件中进行直接使用

//此块代码是放在template中的---也就是我们要放置显示分页的区域    
  <!-- *分页器* -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 16, 24, 32, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- *分页器 end * -->

//以下几个key值是放在data中的 

   //页面如果涉及到表单搜索查询   当前页数与每页条数放置在表单取值中  
   current: 1,   //当前页数
      size: 8,  //每页显示条数
      
     // 分页配置  跳转到多少页的
      currentPage: 1, //直接跳转到的页数
      total: 100,  //总条数
     

    //以下是放在methods中，是用来点击切换页码与条数的
    //分页
    handleSizeChange(val) {
      this.formInline.size = val;   //formInline 是我页面表单的数据对象
      this.Data(); //此处调用页面涉及到搜索  应调用放置搜索事件  无搜索直接调用页面数据接口即可     
    },
    handleCurrentChange(val) {
      this.formInline.current = val;
      this.Data();//此处调用页面涉及到搜索  应调用放置搜索事件  无搜索直接调用页面数据接口即可
    },

效果：

      类型可根据官网进行切换 --- 分页地址

 

分页在组件中的简单使用教程，小白入门级哦~~~