官网演示和源码

整个最复杂的分页组件：

源码如下：

<div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

用最通俗的话解释

1. 组件的布局

layout属性有多个属性值，它们有不同的功能，从左到右依次为

total，表示后端数据的总条数，即页面上的 “ 共400条 ”
sizes，表示每页能容纳多少条数据，即页面上的下拉选框 “ 100条/页 ”
prev，表示向前翻一页，即页面上的 “ < ”
pager，表示指定翻到哪一页，即页面上的 “ 1 2 3 4 ”
next，表示向后翻一页，即页面上的 “ > ”
jumper，表示直接跳去哪一页，即页面上的 “ 前往 3 页 ”

2. 四个核心属性

total属性，官网绑定为400，表示后端的数据共有400条
page-size属性，通过页面上的下拉选框，你可以选择每页装多少条数据
current-page属性，通过" < "按钮、" > "按钮、" 1 2 3 4 "、" 前往 3 页 "，你可以改变当前所在的页码
page-sizes属性，它是一个数组，表示下拉选框中的选项，

3. 二个核心事件

@size-change事件，当你使用下拉选框改变page-size属性时，它能监听到page-size属性的变化，并立刻将最新的值自动传给handleSizeChange事件处理函数，你甚至无需给它手动传参
@current-change事件，当你使用以上三种方式改变current-page属性时，它能监听到current-page属性的变化，并立刻将最新的值自动传给handleCurrentChange事件处理函数，你甚至无需给它手动传参

组件工作的机制

首先，必须明确的是，我们前端并不拥有后端的所有数据，我们能做的就是向后端发ajax，将响应的数据渲染到页面上。

那么，我们如何需要怎样的请求？从减轻服务器压力、降低冗余信息的角度出发，我们没有必要将后端的所有数据渲染到页面上。例如后端有10000条数据，难道都要给用户看吗？显然没有必要。

我们只需要提供个后端两个请求参数即可：指定每页显示多少条数据和显示第几页的数据。

后端使用的是查询语句，根据这两个关键参数在数据库找到我们想看的数据，接着响应给我们，最后由我们渲染到页面上。

所以每一次用户翻页都是在重复这个过程：发请求---拿响应数据---渲染页面。

疑问

也许你会问：既然是根据每页显示多少条数据和显示第几页的数据来查询数据库，那么两个值交织在一起不会乱吗？

答案：不会，因为这两个参数在你翻页时，你只有机会修改其中之一

也许你会问：显示某一条数据是动态的吗？

答案：是，因为数据库的总条数不变，那么你在页面上看到某条数据的时机会不同。两个请求参数，使得你有很多种组合方式，从这个角度说，这种机制有弹性

也许你会问：Pagination还有哪些厉害之处？答案：1. 它能根据total属性值和sizes属性值，自动计算出显示的pager页码；2. 当你想调皮的在jumper中输入999999页或者-111111页时，组件能识别你的小心思，然后分别给你跳到最后一页或第一页，是不是很厉害？！

3分钟完全掌握Element的Pagination组件