vue+element-ui 实现分页

官方例子
  　　官方提示：
　　　　设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示显示页码总数，size用于设置每页显示的页码数量。

当前页码数：

userListArr.slice((currentPage1)*pagesize,currentPage*pagesize)

<el-table
 :data="userListArr.slice((currentPage1)*pagesize,currentPage*pagesize)"
  style="width: 100%">
  <el-table-column
     type="index"
     label="序号"
     width="50">
  </el-table-column>
  <el-table-column
     prop="name"
     label="姓名">
  </el-table-column>
  <el-table-column
     prop="age"
     label="年龄">
  </el-table-column>
</el-table>

分页样式

<!-- 分页区域 -->
 <el-pagination 
    class="pageStyle"
    background
    layout="prev, pager, next"
    @current-change = "current_change"
    :total="total">
 </el-pagination>

data

data() {
  total: 1000, // 默认数据总数
  pagesize:10,//每页的数据条数
  currentPage:1,//默认开始页面
  userListArr: [
      {
          name: '李明',
          age: 11
      },
      {
          name: '王磊',
          age: 23
      }
  ],

}

methods方法

methods: {
   // 当前页码
    current_change(currentPage) {
        this.currentPage = currentPage
    },

    // 获取员工信息
     getUserListArr() {
         var _this =this
         this.$axios.get('/api/employees').then(function (res){
              console.log(res,'获取页码')
              _this.userListArr = res.data
              _this.total = _this.userListArr.length
              console.log(_this.total,"当前页码")
              console.log(_this.userListArr,"获取员工信息")
          })
      }
}