day13/上午/254-尚硅谷-尚融宝-重置表单

好，接下来呢，我们来看啊，在咱们整个的这个需求当中，咱们已经实现了列表分页，然后呢，最后还有一个查询表单需要我们去实现，是不是，所以呢，我们先来看一下这个查询表单的表单的啊，这个HTML啊，那么这个HTML表单这块呢，不要求大家自己去写啊，大家呢，能够根据这个有的表单啊，能够看得懂，然后如果添加新字段，能够根据已有的这个内容你去改造就可以了，所以呢，第一个查询表单呢，我们就直接复制过来就好了，然后把它复制一下。然后呢，我们找到我们的页面模板部分，把它复制到列表的上面，这个div的里面，复制过来之后呢，先不要着急去看代码，先看效果。好效果有了，再回头去看代码会容易的多，那么这个效果呢，就是123455个组件对吧？一个是手机号的文本框组件，一个是用户类型的三拉列表组件，还有一个是用户状态的三拉列表组件，还有一个就是查询按钮，还有一个是清空按钮，我们点清空的时候呢，希望把这个查询表单清空，并且把查询结果也重置啊，所以呢，这个是这样的五个组件，那么现在我们再结合着展显示出来的这五个组件呢，再去看一看代码就好理解多了，那么这个代码呢，首先它其实呢，就是一个表单对象叫e form，好，E form呢，它有一个非常关键的一个属性，叫做in line啊。

阴赖，阴赖是什么意思呢？那如果你不懂的话，你可以把依赖删掉好，然后看一下结果。啊，这就音滥的意思，阴烂就是行内表达，把所有的内容都展示在一行，除非一行显示不下了，自动换行啊，如果要是非音滥的话呢，就是什么呀，就是左右左右这种结构的表达啊，好，然后啊，接下来呢，就是我再给他阴烂一下啊。

好，然后接下来呢，就是每一个啊。表单元素呢，都会被放在一个叫做e form item。这样的一个节点里面，那么e form item呢，有一个属性叫做label啊，然后呢，这个label呢，就会作为这个元素前面的一个说明文本啊，出现在这个表单元素的前面，手机号，然后这块呢是用户类型，这块呢是用户状态，所以呢，这是手机号用户类型用户状态对吧？所以这是label啊，然后接下来呢，每一个EL form item里面呢，都会有若干个表单元素，那这里面我们是只写了一个叫做input，那这个呢，就是文本框了啊，然后它呢，绑定到search object.mobile所以那很显然我们这个下面啊。下面这块一定会有一个such object，这个是啥呢？就是查询条件好，这个such object我们并不陌生，因为之前我们在写这个such data的时候，我们就把这个设置object给它传到后端了，对不对？好后端呢，它。

它这个是后端在哪在哪这个传入的，我们看一下这个API啊。这个是such object，这个是object啊，然后后端接口谁来接他。后端接口是不是就是我们的user in for query啊好，那么在这个地方就是它，所以就对上号了，对不对啊，所以这个是我们。前端的这个。Search object啊，这个是查询对象，好查询对象把mobile了这块，然后这块呢，就是place holder，就站位文本，就这面有个手机号对吧，这个相当于这个站位文本。

然后接下来呢，看第二个组件，第二组件呢，它这个下拉列表组件，下拉列表组件这块呢，它有一个啊，也有一个place holder啊，所以这面呢就是投啊，默认情况下就请选择对吧，请选择，然后接下来呢，还有个clear吧，Clear ball是什么意思呢？就是当你选完了一个选项的时候，你可以通过点击这个叉把它清掉啊好，那所以如果没有这个clear吧，它删掉啊啊你会发现当我选完一个选项的时候，这面没有查就清不掉了，就你只能选另一个啊，所以你看一看你的需求吧，如果你觉得清掉是有必要的，那你就加上，如果没有必要清掉啊，总之最少要选一个，那你就不加对不对？好，然后接下来呢，下面是ER option啊啊投资人。这个是Y6等于一好，这个地方呢，啊是我们的值啊，这个地方呢，是我们的。这个label label的话呢，就是这个地方展示的是什么值呢？就是你实际选择的是什么对不对，最后呢，这个值呢，会被绑定到这个啊值当中，对吧，会绑定到这个user type当中。

好，所以这块呢是用户类型，所以呢，当我们选择我们看F12啊。先刷一下。好，然后点这个六，然后接下来呢。类里面我们来看一下这个search object啊，目前为止呢，这个search object大家看还是个空是吧，没有选任何内容，所以这手机号呢，我写111还search object里面的mobile就被赋值了啊，然后这个用户类型呢，我选投资人啊，User type呢就等于一了，我选这个借款人，好，User type呢就等于二了，就这个意思，好然后接下来呢，我们再来看用户状态。啊，用户状态这块呢，和用户类型完全一样啊，你看有一个套路嘛，只不过这个地方呢，写的是such置object.status所以呢，这里面用户状态我如果选正常，那这块status就是一啊，如果选锁定，这面status就是零，所以这样的话就是数据的一个双向绑定啊，然后在接下来呢，就是一个查询按钮。

这个查询按钮呢，就是它了。它然后这个查询按钮呢，绑定了一个叫做fe data的一个方法，诶，那就意味着fe data我们已经写好了呀。对吧，早就写好了，那是不是意味着现在他这个查询是好使的呢？我们来试一下。比如说我现在查137681。6630，然后点查询好使对不对，所以只要你把数据绑上，刚才我们所讲的这三个组件，其实讲半天就是一个数据绑定嘛，只要你把数据绑上它就好使，所以就不用做额外的更多的操作了，还是挺容易的哈，然后接下来呢，我们再来看一下，比如说我要选择所有的投资人。

就是所有投资人，我要选择所有的借款，就所有的借款人对不对，好，我要选择正常的借款人啊，那就是正常，我要选择不正常的借款人啊，那就没查询出来对不对，所以也可以进行一个匹配的一个，呃，就是多条件查询啊好，那所以这块呢，就是我们整个的一个查询功能，以及查询表单的一个实现，最后清空啊，我们来看一下清空。查询下面呢，就是清空按钮了。清空按钮呢，嗯，它就也是，嗯，这个绑定了一个方法叫reet data，所以我们把这个ET data呢实现一下。Data呢，实际上就做两件事情，第一还原表单，第二重新查询。

还原表单很简单，因为我们的表单呢，和数据是绑定的，只要你啊这个还原数据就还原了，表单双向绑定嘛，表单绑到这儿了是不是，所以把它还原表单就还原了。这时这就还原表达了啊，然后我们来试一下。比如说这块呢，要要要这块呢，投资人这块呢正常，然后能点清空好标单还原了，对吧？啊其实我们并没有对这个文本框啊，下拉列表做操作，我们只是对他所绑定的数据做了操作啊，数据一更新表单就更新啊。然后呢，重新查询这点在好，我们再来试一下。

啊，首先呢，我来查询一下所有的。嗯，所有的投资人这样吧，我每页三条记录啊。我给他改，还是改成每个十条记录吧，看起来方便一些。然后每月十条记录的话，我这边我就改成嗯。给他改成每五条记录，每页条记录，每页三条记录，改成这样的哈。好，默认让他展示，把所有的数据都展示出来啊，好，然后接下来呢，我选择投资人查询，好，你看这不就是根据我的这个选择，就列出了我当前的这个数据内容嘛，然后接下来我点清空，注意清空不但会清空表单，会还原这个表单还会执行重新的查询，所以呢，点清空，好这个表单清空了，数据呢也重新查询了啊，所以呢，这块就是咱们的整个列表页的一个实现。