本文已参与「新人创作礼」活动，一起开启掘金创作之路。
- 需要注意的是，若:model="taskForm"，则日期选择器的v-model="taskForm.reportDate",因rules是基于表单进行校验的，所以当prop为reportDate时，会自动查找this.taskForm.reportDate的值；
- 在校验的时候需注意reportDate的type为'array',且使用fileds分开为开始日期和结束日期进行校验：
表单内容如下：
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="taskForm" :model="taskForm" :rules="rules" label-width="80px">
<el-form-item label="任务名称" prop="taskName">
<el-input v-model="taskForm.taskName" placeholder="请输入任务名称" />
</el-form-item>
<el-form-item label="填报人" prop="userIds" style="margin-top: 20px">
<el-select v-model="taskForm.userIds" multiple clearable style="width: 100%">
<el-option v-for="item in userOptions" :key="parseInt(item.userId)" :label="item.nickName" :value="parseInt(item.userId)" />
</el-select>
</el-form-item>
<el-form-item label="填报期限" prop="reportDate" style="margin-top: 20px">
<el-date-picker
value-format="yyyy-MM-dd HH:mm:ss"
v-model="taskForm.reportDate"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="截止时间"
align="right">
</el-date-picker>
</el-form-item>
<el-form-item label="填报说明" prop="taskDesc" style="margin-top: 20px">
<el-input type="textarea" v-model="taskForm.taskDesc" placeholder="请输入填报说明" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
校验规则如下：
rules: {
taskName:[
{required: true, message: '请输入任务名称', trigger: 'blur'}
],
userIds:[
{ required: true, message: '请选择填报人', trigger: 'change' }
],
reportDate:[
{ type:'array',required: true, message: '请选择填报时间',
fields:{
0:{type:'string',required:true,message:'请选择开始日期'},
1:{type:'string',required:true,message:'请选择结束日期'}
}}
],
taskDesc:[
{required: true, message: '请输入填报说明', trigger: 'blur'}
]
},
element-ui 表单验证触发方式 trigger :'change' 和 'blur' 的区别：
trigger :'change' change 数据改变触发 比如:需要 手动选择的东西，用 change ; trigger : 'blur', blur 失去焦点 比如:输入框里，验证文本框是否为空没有任何输入的时候,不会触发change但一定会触发 blur 事件
