48-尚硅谷-硅谷通用权限项目-开发角色管理前端-角色列表（添加分页条）

各位同学大家好，下面呢，我们继续来完成角色列表功能，刚才咱们把数据在页面中已经完成了显示，但是显示之后呢，大家也发现咱的功能并没有做完，咱们要做什么功能？条件查询带分页，所以在里边第一部分需要有一个就是分页条的部分，第二部分在页面上边是不是要有你输入条件的输入框了，所以咱最后把分页和条件加上，而这两家的过程中，注意啊，咱们不需要再去编写Java代码了，只需要用element UI中的组件，我们就可以很方便的把这个实现，那首先我们先加上分页的组件，把这个我们先加一加，那分页怎么加？首先找到UI中找到分页组件，我们在里边找下分页，大家看这个位置就是分页，然后分页中呢，我们看啊里边有很多的效果，咱们找一个比较完整的功能，大家看这个完整功能，然后怎么看，把源码找到，找到源码里边。

找到源码应该是在我们的，就是这个地方啊，大家看这里啊，完整功能，然后怎么看呢？很简单啊，EL配置就这么一个分页，然后在里边有很多的部分，这些部分咱们看一下什么意思啊，首先我们看第一部分加个艾特符号。这什么意思啊，它就表示啊，绑定一个事件，触发事件，指这个事件不是扎vau里边的，是由UI封装的，那第一个什么事件叫size称值，咱说一下啊，很好理解，就这个效果，每页显示多少条记录，这是第一个，然后再看第二个就是在这里，呃，那咱们这么来做啊，我把这个图咱给他拉到这里来看，要不然总是划着页面，这么看着不方便啊，咱给他往下拉一下啊。

我把这一部分我们来截个图，就是这个拿到下面来。然后咱们拉到下边来，咱们这么来看，首先大家看啊，第一个叫size change，就是你这个每页多少条记录，它里边会进行处罚，然后第二个叫current change，什么意思呢？当你页码数改变会触发，比如说我当前第四页，我可以改成第三页，第二页，第一页它会触罚，然后再看一个current配置什么意思，当前是第几页，这是看到的，然后咱们继续往下来看。下面有一个叫配置size加个数组，它就表示你能选择每页多少条记录，还有一个配置size是当前我们怎么做的，另外就是叫layout layout，咱一会儿说先看total，一共有400条记录，咱重点说这个layout什么意思，大家看啊，第一个是不是叫total？

什么意思？他就表示啊，我们在里边，你看到这个位置一共是不是有400条记录，就是显示多少条记录，第二个叫sizes，就是你这里边没多少条记录，下面有一个叫PV，就是它表示这个箭头上一步，然后还有一个叫的下一步，中间叫page，就是里边有多少个页码数。最后一个叫jump，它就表示你能跳转到某一页，也就是这个效果，比如你看啊，我这里写一个三回车，说到第三页，我写个二是不是到第二页，另外他做了封装。比如说你看啊，我写个十回车是不是到第四页，我写个负一是不是回到第一页，这就一个完整功能，所以咱们完全可以用它做到一个分页条的添加，只要你把这数据传正确就可以了，这就是分页，那分页条呢，我课件中已经写好了，咱把它直接复制可以了，这个不需要敲，咱把里边那个复制，然后里边的具体内容改成你当前效果就可以了。

那现在我来复制一下。我把它放到我的表格的下边，注意啊，我这里特别强调element UI代码必须要放到你的div里边去，不能放到外边，必须放到里边去，放到外边它里面会有问题，样式不生效，有些效果还不对，必须放到这里面去，所以咱们放到table下面，Div里边加上分页条，咱们看一下里面的特点啊，然后改一下，首先当前页我们传这个配置。另外一共多少条记录total，每页多少条记录limit，然后看这里啊，它就显示一共多少条，记录上一页下一页页码数，还有你跳转到某一页这个位置，表示当页码数变化，它会做一个切换，比如说第一页第二页，然后调咱的方法，就这个方法叫FA date，就是你查第一页，第二页或者第三页，现在分页条就完成了，完成之后咱到里边试一下这个效果，大家看啊，效果就出来了，这是我们的效果，一共有九页，当前第一页我点二。

数第二页，我点三，第三页，然后过程中做了封装，当我在第三页的时候，这个是不能点，我第一页的时候这不能点，因为第一页的时候就没有上一页了，最后一页的时候就没有下一页，然后这里边能跳转我来一个二。我再写个一，我写个十是不是到第三页，我写个负一是不是到第一页，所以现在啊分页条我们就完成了添加，通过MUY，它可以很方便的把这实现，然后这里特别说个细节啊，大家看这个位置。

当我现在改变页码数之后，它会把你改变的页码数给你传到方向中来，什么意思呢？比如说我现在啊，我点二当页数二，那这怎么做，他把二这个数就传到方法中，咱们在方法中得到页码数，根据它查询，这些都是由U做到的。所以说以上啊，咱就把分页条完成了添加。