vue el-pagination 实现分页操作

项目中用到了表格的分页，所以总结了一下：

首先是布局：

<el-pagination @size-change="changeSizeHandle" @current-change="currentChangeHandle"
      :current-page="currentPage"  layout="total, sizes, prev, pager, next, jumper" 
      :total="total" background>
</el-pagination>

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

接下来，事件处理：

<script>
  export default {
   data() {
      return {
         roleList: [],          // 总数据  
         total: 0,             // 总条数，根据接口获取数据长度(注意：这里不能为空)
         size: 10,             //默认每页数据量        
         currentPage: 1        // 默认显示第一页
      };
    },
    methods: {
     // 每页显示的条数改变
     changeSizeHandle(val) {
         this.size = val                   // 改变每页显示的条数 
         this.currentPage = 1              // 注意：在改变每页显示的条数时，要将页码显示到第一页
         this.getInfo()                    // 点击每页显示的条数时，显示第一页
         console.log(`每页 ${val} 条`)
     },

     // current-change用于监听页数改变，而内容也发生改变
     currentChangeHandle(val) {
         this.currentPage = val                // 改变默认的页数
         this.getInfo()                        // 切换页码时，要获取每页显示的条数
        console.log(`当前页: ${val}`)
     },
     
     // 查询信息
     async getInfo() {
         axios.get(this.baseURL + '/role/getInfo', { params: {
             pageSize: this.size,
             pageIndex: this.currentPage,   
         }})
         .then( response => {
             this.roleList = []
             this.roleList = response.data.data.rows
             this.total = response.data.data.total
         })
         .catch( error => {
             console.log(error)
         })
     }
    }
  }
</script>

页面效果如下：