Element-UI框架的使用（二）-- pagination-翻页组件

参考官方文档

作用：当数据量过多时，使用分页分解数据。可与table组件组合使用

基本使用

<!-- layout中的关键字有自己的含义 -->
<!-- prev 前一页 --> <!-- next 下一页 --> <!-- paper 页码 -->
<!-- total用来设置数据的总条数 -->
<!-- 属性:page-size 默认每页10条数据（不写时默认） -->
<!-- 属性：background 是否为分页按钮添加背景色 默认值 false -->
<el-pagination 
  layout="prev, pager, next" 
  :total="1000">
</el-pagination>

效果图

翻页事件 – 当用户点击页面进行翻页时就会触发current-change 事件

<template>
  <div>
    <h1>Pagination</h1>
    /* 点击页码使页码改变时会触发 current-change 事件，在回调函数中添加需要执行
    的代码*/
    <el-pagination
      layout="prev, pager, next"
      :total="1000"
      @current-change="pageChange"  
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    // 把当前点击的页数给传进来（当前页）
    pageChange(page) {
      console.log(page) // 控制台输出当前页码
    }
  }
}
</script>