element-UI的分页效果

element的vue分页

第一步将下面代码写入页面中
在这里插入代码片

<el-pagination
        style="float:right"
        @size-change="emitPageSize"
        @current-change="emitCurrentPage"
        :current-page.sync="paginationObj.currentPage"
        :page-size="paginationObj.numPerPage"
        layout="total, prev, pager, next"
        :total="paginationObj.paginationTotal">
      </el-pagination>

.第二步设置JS部分：不要问为什么写就行了

```javascript

```javascript
 emitPageSize: function(val) {
      var vm = this;
      vm.paginationObj.currentPage = 1;
      vm.paginationObj.numPerPage = val;
      vm.getList();//数据获取接口
    },
    // 切换当前页码
    emitCurrentPage: function(val) {
      var vm = this;
      vm.paginationObj.currentPage = val;
      vm.getList();//数据获取接口
    },

第三步补充data部分的内容

paginationObj: {
        paginationTotalPages: 0, //传给分页组件的数据-数据总页码
        paginationTotal: 0, //传给分页组件的数据-数据总数量
        currentPage: 1, //传给分页组件的数据-每页数据数量
        numPerPage: 10 //传给分页组件的数据-每页数据数量
      },

第四部，赋值转换 将获取的数据中的参数进行赋值

var vm=this;
 vm.paginationObj.paginationTotalPages = result.obj.totalPages;
  vm.paginationObj.paginationTotal = result.obj.totalCount;