element-ui(el-pagination)实现分页,vue中使用element

1.使用npm install element-ui --save安装element-ui

出现以上提示信息表示element-ui安装成功

2.在main 中引入element-ui/样式文件，并使用element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3:实现分页功能

<div>
    <el-pagination
      @size-change='handleSizeChange'
      @current-change='handleCurrentChange'
      :current-page ='null'
      :page-sizes='pageSizes'
      :page-size='pageSize'
      layout='total ,sizes,prev,pager,next,jumper'
      :total='totalSize'>
    </el-pagination>
  </div>

 handleSizeChange(val) {
              this.pageSize = val
             this.click()
          },
           handleCurrentChange(val) {
              this.page = val;
               this.click()
          },

获取接口：

 click(){
              var pageMess = {//传递参数过后台，
                  "page": {
                      pageNumber: this.page,
                      pageSize: this.pageSize
                  },
                  "catalogId": this.value,
                  "keyWord": this.searchKey
              }
              findWxzlList(pageMess).then((res) => { //获取接口
                  if (res.data.message == '成功') {
                      this.tableData=res.data.data
                      this.totalPage=res.data.page.totalSize
                  }
              })
          },

data中：

data(){
      return{
        page:1, //初始化显示第一页数据
        pageSize:20,//默认显示页面数量
        pageSizes:[5,10,15,20],//页面数据数组，展示的选择每页显示个数的选项
        totalSize:200//总条数
      }
    },

以上的data中总条数是写的一个固定值，但一般在项目中都是从接口获取到的数据，
具体的显示结果：
其中共200条数据为totalSize；

X条/页为 默认显示的是20条每页，对应data中的 pageSize:20，也可以选择切换显示每页多少条数，对应data中的pageSizes:[5,10,15,20]