00:00
下面呢,我们继续来完成讲师分页查询功能,刚才呢我们完成了列表的基本显示,包括前端里边的代码编写,那咱可以再看一遍啊,在代码中呢,我们的过程就是首先添加路由,在root里边的in宅子里边添加路由,然后第二部分我们在API里边建JS文件。这个咱们已经做了创建,包括把接口的路径、提交方式、参数等完成定义,最后在页面中进行调用,就是list VE中先引入JS文件,然后完成这个调用,最终得到集合,包括你的总记录数,然后上面用element UI中的表格这个组件。完成了显示,所以咱们刚才是完成了讲师列表的基本功能,完成之后呢,我们继续往下来做,大家看到啊,咱们这个功能是不是叫做条件查询带分页呀,所以里边要有分页部分,另外要有条件的数部分,所以这两部分我们来做一下,首先我们先加上分页部分。
01:11
分页部分呢,咱们通过element UI中的组件直接复制可以了,那我们来找一下啊,在里边有这个分页的这么一个组件,就这个。然后你看里边有不同的这的效果,它里边都提供了源码,那我们直接用就可以了,我这里边在课件中给各位已经提供出来了,那我把这个代码咱直接复制过来,然后快速改成我们的效果,这是艾文的UI中给咱们封装的这个分页组件,那我来写一下啊。我把组件写到这个EL table下边,注意啊,咱们用I的U需要放到这个to的div里面去,所以我写到这位置,然后这里边呢,有很多值,咱们来看一遍啊,首先大家看第一个看的配置,这个传入你当前页的值,咱当前页就是配置,第二个total总记住数,第三个limit就是每页显示记住数。
02:11
然后这个什么意思,我强调就是咱们可以自己选择你每页显示多少条记录,也就是里边的这个效果。所以大家看啊,每页显示100条,每页显示200条,每页显示300条,用这个来实现,所以这里边做的就是这个效果,你可以选择每页显示多少条记录,下面两个是它的样式部分,然后最后有两个部分,我强调啊,艾特咱们说过,就是咱们VE中的绑定事件的指令,这两事件是由IUI封装的,咱看一下啊,第一个事件什么意思呢?就是你现在每次改变了这个每页显示多少条记录,然后事件会触发才会调的方法,然后第二个表示。你的页码数发生变化,它会触发,比如我现在第一页,然后我点第二页,或者我点第三页,页码数变化,然后它会做触发,所以这里边咱需要把这两个方法做一个实现,那我来写一下啊,第一个方法叫趁制配置size,就是你改变每页显示多少条记录。
03:17
那我写到这位置。我写一下啊,就是改变每页显示的记录数,它叫趁着配置赛,然后这个方法中咱们做什么呢?给各位强调啊,就是现在IUI中给咱做了一个封装,当你就是。每次改变了页码数,就是每页显示多条记录,它会把这个值给我们传到这个方案中来,就是传到这个衬指配置set里边去,那咱们写个参数,比如我叫size size得到就是你改为这个值,然后改变之后咱做个负值,这点limit特。等于这个size,最后等来调这个FA date方法,因为fe date中有这个每页显示多条记录,咱把第二条记录做个封装就可以了,所以这是第一个改变每页显示的记住数。在IUI中,它会把你改变的记住数给我们传到方法中来,它会自动做到这是一个。然后另外还一个方法叫c change,当你改变页码数之后,它会调这个方法。
04:28
我写一下改变页码数,比如说当天第一页啊,咱们改成第二页,或者改成第三页,在这里边它会把你改变的页码数给你传过来,比如说改变成一,改变成二,它会传过来,咱们同样做个赋值。这次点配置等于这个配置,然后最后调用的方法,这样的话把这个分页部分咱们就完成了,这各位能做到,这是我们写到的,然后写完之后呢,我们最后再把里面那个条件部分加上,条件部分呢,咱可以用element UI中这个就是表单组件进行实现,因为它里边有这个组件。
05:11
咱可以找一下啊,就这个组件表单,通过它我们来做个实现,我在课件中写好了,咱直接拿过来。M的UI部分我们直接复制可以了,然后我把它放到咱的table的上边。加上你的条件部分,然后咱们看一下啊,这条件部分里边是什么内容,首先form就是一个表单,这里边有一个叫inline,表示它在一行显示,就是你看啊。这个表单是多行,这个是在一行,咱们条件部分应该是在一行显示,然后下面有咱的值,比如第一个只是讲师名称,然后包括里边有头衔,有你的入住时间,截住时间等等,最后我们点这个查询调fe date方法进行实现,这样的话就可以了。
06:05
然后最后呢,有一个清空方法,这个方法咱们来写一下。最后这个清空的方法就是现在我查询之后,咱把这个表单可以做一个清空。Reet。这道。那怎么清空,我来说一下啊,因为大家看啊,在表单里边咱们有这么一个指令叫V-model是不是叫双向绑定,双向绑定之后在search o BG中会传入咱的条件值,那我把表单清空,把OBG清空是不是就可以了,因为这叫双向绑定。那我来写一下啊,设置OBD等于空,然后最后我们再调用这个方法。查询全部,这是清空的方法,所以说以上咱们通过这段代码就把这个条件查询带分页,我们就最终完成了基于element UI中的组件,我们最终做实现,那咱们把最终效果咱们来试一下啊,看一下什么结果。
07:08
咱们来看一下啊。首先大家看里边啊,这位置你看下面是不是有分页条部分啊,咱们一共四条记录,然后里边有这些值,比如说改变这个页数啊,当然咱们没多数据,为了明确我在里边呢,我再手动加入几条数据,为了咱看到更明确,要不然咱们演示不出来那个扉页的效果,那我来改一下啊。这个值我都改成零,因为咱们这个就是逻辑删除。这个零和一表示,然后现在我再重新刷新。把这个改一下,每页显示五条记录,然后大家看啊,第一页有五条,是不是有二,那我点二,第二页是不是一条,因为现在我一共有一条记录,包括这里边有它的上页下页这种效果现在都可以了,上面有一个条件部分,那我来做个输入,比如现在啊,我随便输一个。
08:07
啊,这个讲师名称我们写一个上官,就查这个上官讲师点查询这个是不是出来了,所以以上咱就把这个条件查询带分页,我们就最终实出来了,这各位那最终完成出来,基于咱们VE加U。整合出前端的最终的效果。
我来说两句