49-尚硅谷-硅谷通用权限项目-开发角色管理前端-角色列表（添加搜索条件）

刚才呢，咱们完成了分页条的添加，那最后呢，我们把条件输入的部分加进去，条件输入部分还是通过UI中的组件来实现，那咱们到里边找一下，大家找这个组件叫form表单，咱们打开表单，那比如说一会儿我们就根据角色的名称进行查询，咱在页面中是不是就加上一个表单就可以了，而表单写法大家看一下啊，EL form里边有这个form item，包括你看这个。Input是不是输入框，所以咱们加上它就可以了，然后下面我们来做个实现，首先我课件中写好了一个div，我把这个直接复制，然后复制到我这个表格的上边，就是table的上边，然后复制之后咱们看一下里面内容啊，首先在里边加了一个yellow form，然后里边有第一个就是输入框，叫角色名称。

下面还有我们的按钮，大家看啊，按钮里边叫搜索，就是EL button button里边咱们做了什么？是不是绑定事件呀，调用我们的方法最终进行搜索。另外在角色名称中加了VE，或者说V5中的一个组件V-model双向绑定，当我输入这个角色名称，把名称会绑定到我们的search o BG的对象中去，这是V5中的这个特点，双向绑定，所以现在这个我们就完成了。我强调啊，各位在复制这段代码的时候，特别注意里边这个名字不要写错，比如说这个色OBD，你调的方法名称跟你当前这里边定义的要保持一致，现在条件部分做了添加。添加之后我们来做个测试，看一下效果啊，大家看啊，在里边是不是有这个角色名称，那咱们输入一个名称，比如说我就叫测试。

咱们点击搜索，大家看带测试的是不是都出来了，就这些，那比如说我现在啊，咱们再试一个，我换一个，我们就叫这个啊，大家看一下数据啊。比如说我这个at硅谷。点搜索各位看这个是不是也能搜索到，所以现在证明咱们的条件分页查询就完成了。完成之后呢，里面有一个小功能，咱做一下，就这个功能叫重置，现在啊大家想一下，我想做个功能点重置两个事情，第一个把这个表单清空，然后第二个页面中让它显示所有的数据，所以咱最后把重置来写一下，大看怎么做啊，重置呢，它是在这里调的方法叫reet z date，那咱们在里边见一下这个方法，我来到这个method里边，注意别放错位置啊，在里边我们写方法就是重置。

Reet data加上方法别忘记加括号，那咱怎么做呢？两步操作，第一步，清空表单。然后第二步就是刷新页面，或者说要查询所有的数据，那咱们做一下啊，首先查所有数据很简单，直接调PHD的方法就可以了，关键是怎么清空表单，这各位要清楚啊，按照view中的特点，因为它是双向绑定，所以做法就是写个这次点色是OBG等于空是不是就可以了，就可以把表单清空。以上就是咱们完成这个清空功能，或者说叫充值功能，那咱们试一下啊，我在里边刷新，我先做个搜索，At硅谷搜索得到数据，然后点重置，大家看表单清空了，他也查询了全部数据，所以以上啊，咱通过这些部分就完成了我们角色管理中的第一个功能条件分页查询的列表功能，在前端里边，各位记住这个编写的结构，咱们通过这个。

VI的部分，包括通过I的UI部分，最终完成了列表功能。