开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师管理前端-讲师条件查询】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11338
讲师管理前端-讲师条件查询
现在需要做条件查询带分页，现在把列表部分和分页条都完成，缺少的是条件部分，所以需要在上面加上一个条件部分输入不同的条件，最后点击查询，可以查询数据，现在添加条件的部分。
第一个分页部分已经做到了，接下来添加条件的部分。
使用element-ui组件实现出来，到组件中找一下，需要做输入，对应所学应该属于表单部分，所以找到表单的部分。
表单在表格的附近，点击，选择可以输入时间等等，找一个更符合条件的。
这里我们需要四个条件，但表单只有两个条件，多加几个即可。
将源码点开，
我们将源代码复制过来
Element-ui 里的表单就叫 el-form，在里面有这样一个值：
<el-forminline="truemodel="formInline" class="demo-form-inline">
这里的 class 指的是样式。
然后来看这句话
Inline= "true "，in 是在什么里的意思，而line有线的意思，这句话的意思就是让你的表单在一行径显示。表示在一行显示是固定的，加一个 model 是为了取值。
<el-form:inline="true":model="formInline" class"demo-form-inline">
<el-fom-item label1=审批人”>
el-input- v-model-=formInline.user" placeholder=审批人"</el-input->
</el-form-item>
<el-form-item label=活动区域>
el-select- v-model-="formInline. region" placeholder=活动区域>
<el-option label=区域- value="shanghai"</el-option-
<el-option label="" value"beijing"></el-option>
</el-select>
</el-form-item>
cel-form-item>
<el-button type="primary" click ="onsubmit"></el-button>
</el-form-item>
</el-form>
%3Cscript%3E
export default
data(){
Return
formInline:
user: '
region:''
每个书项部分都是一个叫 el-form-item 就是表单的项，这是审批人，这是活动区域，审批人是一个普通的 input 数框，但这个活动区域是这样的结构，用下拉列表来做到，
第一个是普通的 input数框，第二个是下拉列表。
Select，option加列表，最后有一个button主要就是这个结构。写多个 item，运用学过的一个指令叫 v-model，v-model 表示双向绑定。
对象和 region 有一个对应关系，里面输入值之后对象中就有他的值，跟着去改变，在前者输入值后，后者也会有它的值，因为是双向绑定。
加一个 v-model 加一个双向绑定就可以做到，最后提交，加一个click事件，用这个就能改成效果。
把课件中的代码复制下来：
-查询表单--
cel-form inline="true" class"demo-form-inline">
cel-form-item>
el- -input v-model---searchObj. name placeholder=讲师名"
</el-form-item>
cel-form-item>
el- select v-model---searchOby.leve clearable placeholder讲师头衔
el- -option: value=1 label=高级讲师
cel- -option: value=2" label=首席讲师
</el-select>
</el-form-item>
el-form -item- label-添加时间
<el-date-picker
v-model-"searchOb]. begin"
type-"datetime"
placeholder=选择开始时间
value-format="yyyy-MM-dd HH: mm: ss"
default-time="00: 00: 00"
因为是条件部分，所以放到 el-table 的上面，看一下内容。下面有几个值讲师名称 讲师头衔，头衔分为一和2，1表示高级讲师，2表示首席讲师。
有两个时间，一个开始时间，一个结束时间，时间不需要自己去输入，可以用到这种形式。
这是一个选择时间窗口，应用了一个时间选择框，这样就添加了一个表单部分，最后有一个查询按钮，里面有个事件，可以做到查询。
做到之后，修改一下，首先看第一个，里面有一个 v-mode，这里面要做到双向绑定，这里面之前定义了一个对象叫做 teacherQuery 这个对象就用于条件封装，所以把它的值都改成我们这个对象。把 searchObj 都改成 teacherQuery，还有开始时间和结束时间都做一个修改，改的过程中有一个细节。
对象中有 user 和 region 两个属性，这两个属性可以不写，可以加入进去，这个属性可以不用去定义，定义也没有错，它会自动加进去，但定义出来也没错。
定义中是空白，这么做也可以，会自动加进去。最后输入值，用到了v-model，对象中条件数据。这里需要修改一下，这个是做条件查询在分页的getList方法，调用一下，这个效果就做到了，这是条件查询的一个添加。
使用 element--ui组件实现出来
在列表上面添加条件输入表单,使用v-mode1数据绑定，简单复制一部分。
kel-form inline="true" class="demo-form-inline">
<el-form-item>
el-input- v-model-teacherQuery. name placeholder=讲师名"/
</el-form-item>
最终做一个查询，查询里面绑定一个事件，最终可以查询出来。
完成之后把效果试一下，加了一个表单之后的效果，名字要跟对象名字对应，试一下最后的结果，刷新，默认没有条件，输入一个姓王的讲师，点击查询 搜索到王二王五，加上一个首席讲师的条件，搜索到了王五。什么都不输入，点击查询是全部。
随便找一个时间，比如19年10月31日，现在点击查询，三个满足条件值查询出来，证明可以查询出来。
下面还有带分页，这就叫条件查询带分页。这个就是分页加条件功能。
还有一个功能，清空，也试验一下。做一个分享，输入一个条件，点击查询，根据条件查数据，清空做两件事情，第一件把条件值清空，第二个查询所有数据。
- 清空表单输入条件数据
- 查询所有的数据
清空里面绑定事件 resetdata，定义一下方法，名字可以随便，在method里面再写一个方法，之前有一个方法，加上一个resetdata的方法，这个方法表示清空。
清空共有两步，第一步，清空表单 输入条件数据，第二步查询所有讲师数据。
查询所有讲师数据，调用 getlist 的方法。
表单数据清空：用到v-model，表单里都有数据输入，输入值之后，在teacherquery对象中，数据是双向绑定，把对象清空，对应的表单也就消失了。
对象清空：this. teacherQuery={}
一个地方值没有，另一个地方也不存在。
resetData/清空的方法
//表单输入项数据清空
this. teacherQuery
/查询所有讲师数据
this. getList()
试一下最后的效果，搜索条件王，高级讲师点击查询，清空查看效果。安装数据消失，查询所有数据。
