简介
这个页面里内容非常多，真的挺复杂的，各种情况都能遇到，今天算是不报bug了，趁着这个机会好好的总结，学习一下，里面的小知识点。开始吧。让我们能从头开始。
搜索框
- 搜索框里面用elementUI里面的Form表单来创建；
- 在Form组件中，每一个表单域由一个Form-item组件构成，表单域中可以放置各种类型的表单控件，包括Input、Select、checkbox、radio、switch、datepicker、timepicker;
- 上面的这些表单控件，我们此次基本上都用到了；
- 当垂直方向空间受限制且表单较简单时，可在一行放置表单，设置inline属性为true,
:inline="true";
el-form的表单校验功能
el-form的rules设置校验规则，el-form-item的prop属性，绑定校验规则;el-form的model属性，是用来指定表单使用的数据；- 如果要用rules来进行表单验证，那么
el-input绑定的元素必须是el-form的model直接属性，否则会导致校验失败。
<el-form :model="queryParams" :rules="rules">
<el-form-item label="产品编码" prop="code">
<el-input v-model="queryParams.code" />
</el-form-item>
</el-form>
- 这段代码el-form的model是queryParams，那么 el-form-item 中所有需要校验的表单的 的 model 也必须是queryParams.xxx;
el-from-item 的 prop 属性
el-from-item的prop属性必须与el-input中需要校验的表单属性一致;- 就是
prop的code必须是v-model里面的code；
多表单校验
el-form-item内部如果包含多个表单，默认校验失败时，会将所有表单高亮，例如：
- 虽然只有第二个表单没有输入，但是校验失败是会同时高亮两个表单，怎么只对第二个表单高亮呢？
- 解决办法是用嵌套：
- 外层el-form-item是正常的信息，内层对第二个表单再次嵌套el-form-item指定校验属性；
<el-form-item label="任务执行时间：" required>
<el-select v-model="data.executeCycle">
<el-option label="每小时" value="hour">每小时</el-option>
<el-option label="每日" value="day">每日</el-option>
<el-option label="每周" value="week">每周</el-option>
<el-option label="每月" value="month">每月</el-option>
</el-select>
<el-form-item prop="executeTime">
<el-date-picker v-model="data.executeTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
default-time="00:00:00">
</el-date-picker>
</el-form-item>
</el-form-item>
- 将日期输入框包裹在新的el-form-item中，外层的el-form-item,添加required显示前面的红星，就可以只对该属性校验了，将第二个表单再嵌套后，校验结果就正常了；
时间选择器
<el-form-item label="创建时间" prop="timeList">
<el-date-picker
v-model="timeList"
type="daterange"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
clearable
size="small"
@change="handleSelectTime"
></el-date-picker>
</el-form-item>
- 这里的
timeList,默认的是一个数组，当点击开始日期和结束日期时，会自动存放在，这个数组里面； - 因为后端需要的参数是
startTime和endTime,所以把timeList的值传给这两个参数；- 传参的方法：需要借用这个
change事件；- 这个参数的属性：用户确认选定的值时触发；
// 选择时间 handleSelectTime() { this.queryParams.startTime = this.timeList[0] this.queryParams.endTime = this.timeList[1] },
三级分类
- 传参的方法：需要借用这个
