day13/上午/251-尚硅谷-尚融宝-分页组件的属使用和属性说明

好，那呃，现在呢，我们要做的是分页功能，所以呢，我们先打开这个element UI的这个网站的组建这个页面，然后在组建这个页面当中呢，咱们搜一下分页，然后你就会看到呢，这块有一个page nation啊这样的一个分页组件，我们点进去看一下，它这个里面呢，有很多用法啊，我们可以先预览一下都有什么，比如说有基础用法啊这种展现的样子，还有呢，就是啊就是如果。页码非常大的话，你怎么去设置最大页码按钮，然后呢，就是来在最大页码呢，就是你看这面默认情况下，这是五，这是六啊，这是十对吧？啊，你怎么去设置你最多能显示多少个页码，因为你50个不可能都显示在这个地方，对吧？然后最多界面可以显示几个，还有呢，就是带背景颜色的分音，其实这就是样式的变化，和上面样式不一样，再接来呢，就是小型扉页啊，这个占的空间比较小啊，和上面相比，然后附加功能，附加功能其实这个挺有用的啊，显示总页数啊，这个是显示的是总记录数啊，然后这个是显示总页数，这个是上一页，这是下一页，对吧？还有呢，就是还可以切换每页多少条记录啊，还有呢，就是可以前往，比如说前往第一页，前往第二页啊等等啊，这样的话就请看前往第二页了，然后这个呢，就是比较完整的功能啥都有的。

这个是一共有多少条记录，然后啊每页记录数的切换是吧？啊，然后还有这个就是前往第几页啊，这是前往第四页啊，第四页了，然后在页面当中进行导航切换等等啊，我们要整合的话，就肯定是整合这种啊，比较复杂这个了，是不是因为它功能比较多，展示的内容信息比较全啊，然后呢，还有就是如果只有一页的话，我就不显示分页了，如果有多页的话，我再显示分页啊，所以这是这样的一些功能，然后下面呢，就是它的一个attribute attribute就是文档嘛，啊都有哪些属性我们可以设置，然后我们具体在写的时候呢，肯定是要参考他们的啊，所以接下来呢，咱们就来看一看这个分页吧，那首先呢。

我们呢，就是得把这个模板呢，给它复制过来，模板这一块呢，实际上大家按照，嗯，咱们这个。里面复制也可以啊，比如说你复制这个完整功能，点开，然后复制这一块，这是完整功能哈，把这块直接复制过去也可以啊，当然了，你也可以直接复制，我在笔记当中就是给你已经优化好的内容。见面。其实复制哪个都一样，只要你把它理解了呀，你都能够自己进行修改了哈。这款分页组件其实跟刚才你在这块看到的呢，是很像的一样的，几乎啊，然后呢，因为我就是从这复制过来，复制一下，然后复制到咱们的页面当中。好，复制到table的下面。

Div的里面别复制错地方就行了。然后这面呢，你会发现它就是一个分页组件，分页组件里面呢，这里面呢，有很多这个属性，对不对，属性还有各种各样类型的，有带冒号的，有不带冒号的，还有带符号的，所以我们一个一个来看啊，首先就就看能看得懂的，我先把这个页面给他打开。好，大家看啊，我们这个分页就展示在这个位置，然后我们先看能看得懂的，哪个地方能看得懂的，比如说这个page sizes page sizes呢，很明显是分页组件自己定义的一个啊属性，而这个属性呢，它要求的是一个啊，就是数据值，所以说呢，这面就是数据绑定了啊，然后接下来呢，我们这个数据值呢。啊是代表什么意思呢？啊，你其实通过这个页面就可以猜到，它应该是这个下拉列表里面的对吧，十条每页，20条每页，我们通过这个呢，实际上是可以切换的啊，当然了，因为现在我们的这个啊页面当中呢，嗯，并没有那么多的数据，所以呢，我们现在这切换呢，好像没有太大的效果，那现在我们有三条记录的话呢，那你可以这样去改一下，就是比如说一条每页两条每对吧。

一条每页，两条每页啊好，然后接下来呢，你看如果是每页一条记录的话，那么就是三页呗，对不对，如果是每页两条记录的话，那么就是两页呗，是不是，所以说现在翻页这个功能在这个位置是可用的啊，但是你会发现它还没有和我们的列表整合起来啊，因为我翻页的时候呢，你看就是页码它自己。变化啊，但是列表呢并没有变化，所以这个呢，翻页和列表它俩之间的整合，其实是我们现在要解决这个问题啊，所以现在呢，我们能够猜到的就是page sizes的作用了，然后接下来呢，我们再来看page size的作用。

配置size的作用呢，在这个位置。它绑定到了这个limit limit这块呢，我们定义的是每页的记录数，所以这配置size呢，就应该是每一个记录数啊，当然了，如果你实在是不敢确认的话，你也可以干嘛，你可以看这面的文档啊。这个文档里面就明确的写了page size，叫做每页显示条目个数，对不对啊好，然后接下来呢，我们来看一下。每页显示的条目个数呢，是不是十条啊啊，如果是十条的话，那么在这个位置。这个页面当中啊，咱们呢，其实就是按每页十条来来展示啊，然后那你如果要是在这个地方，你就说我每页就显示两条记录。每页显示两条记录呢，那你会发现我页面当中就两条记录，当然了，这个在这个地方我改了limit等于二，就意味着我这个昨天的那个啊，API的调用这块里面的是二，所以呢，这面呢，就展示了两条记录啊，这边展示两条记录，你会发现这面默认。

是不是它就展示两条每页啊，明白这个意思吧，啊好，所以呢，这块就是为什么页这个分页这块。Page size等于limit，就是默认它会给你定位到这个两条每页这个下拉列表当中，然后接下来呢，如果你是一条每页。大家看这个地方默认是不是就给你展示一条每页啊，明白吧，啊，那假设说你这边写三条每页。好，三条每页，这就一条酶，为啥没有这三条酶，因为我们三大列表里面没有维护那个那个那个数据，对吧，你这个里面就两个一和二，没有三，所以它没办法展示，那它就默认展示一这个理解哈，所以我们再来说一下啊，这个地方的limit啊，它会被这个查询啊接口所用，然后呢，查询出来的数据呢，就是我们定义的数据，三条每页啊，然后这个地方它绑定了美墙，意思呢就是呃，分页组件，它默认情况下展示的。

每页的这个记录数，当然如果没配置的话，那么它就展示默认下拉列表的第一个记录，如果配置了的话，它就会展示相对应的一个记录，是吧？啊，所以呢，你现在可以在这块配置一下每页三条记录。好，大家看现在就默认选中了这个三条记录对吧？啊，所以呢，这个是我们看到的page size和page size啊，好，这个style就是一个样式而已啊，它就是和上面那个表格呢，有30像素的距离，就是这个分页和上面这个表格中间是有一个30像素的距离的，好，然后接下来呢，就是。

偷偷喝。Current page置，我们先来看这个current page current page呢指的就是当前是第几页，那你看我current page是一是吧，这是当前是第页。对吧，卡的配置绑到哪绑到绑到配置啊，配置是几，配置是一啊，所以当前是第一啊，然后接下来呢，我先把这个limit转成二吧啊每有两条记录，比如说我当前是第一。那他的配置就是一嘛啊，就这个意思啊，我当前是第二页。那卡配置就是二嘛，明白吧？啊，但是目前为止你要切换的话，恐怕呢，还没有和上面的这个列表做关联，所以这也是一会我们要解决的问题啊，我们一会要解决几个问题了，两个问题，第一个是这个切换是吧，他自己和自己玩呢，你看没和列表配合起来对吧？啊也要解决的是这是第一个问题，第二问题就是这块了，你看它也是自己和自己玩，这块都会相应的进行变化，对吧，自己也会相应的进行变化啊，但是列表没有变，所以呢，我们要解决的是这两个问题，好，然后呢，接下来。

我再把它改回去。接下来呢，我们看这个它的配置，明白了total是什么，Total就是总记录数啊，总记录数你看它会展示在这个地方，一共三条。总记录数是吧？啊，所以这是头疼，然后接下来呢，就是layout layout是什么呢？Layout我把它删下去你就知道，比如说把这个删下去。大家看是不是就只显示总记录数了，所以layout里面的这些内容都是一些关键词啊啊总记录数页码。对吧，下拉下拉页码就是每页记录数啊，然后这个是上一页。

上一页这个小箭头啊好，然后接下来呢，是页码下一页跳转。这是页码，就是下一页就是跳转明白吧，啊，所以这就是这样的，然后你也可以去切换，比如说这个嗯，Sizes我想显示在的前面。啊，头头和三四换一下。那就这样，这块是呃，每页记录数，这面是头头明白吧，啊，所以这块呢，就是。Layout这个很简单啊，Layout这个里面呢，就这些固定的值，那另外呢，你如果还想去看更多的内容的话呢，你可以去看一下，就是这面有个layout属性吧，然后他说有这样的一些内容，哎，这个箭头是什么意思，我们试一下把这个箭头复制一下。比如说我把箭头就复制到这个位置，到这个位置了啊，然后接下来呢，我们来看一下。

你看前往第几页，它就跑到右面去了，所以箭头的意思就是什么，你给我上右面去是不是啊，所以就很好理解啊，所见即所得的。好吧，那这样的话呢，就是我们整个的这个页码的这几个基本属性的一个说明，然后另外呢，这里面还有两个事件对不对，一个事件呢，大家看是不是叫size change呀。一个事件是不是叫current change呀？是不是就是我说刚才要解决那两个问题，什么叫size change，就是页码大小的切换。就是这块的切换啊，他绑定了一个事件，所以在这个事件当中，我们肯定是要有一些啊行动要去去执行的哈，有一些内容要去做的好，Current change是什么？当前页码的变化，所以呢，它就会监听一监听这个变化啊，这个叫第一页，然后current change change到第二页，Current change change到第三页，这个size change change，每页两条，Size change change change每页三条，所以这块呢，就是我们size衬纸和开衬纸这两个。

叫做事件，然后一会儿呢，我们会针对这两个事件呢，进行一个详细的讲解，看一看怎么把分页和列表把它们整合起来。