关于vue中el-date-picker type=daterange表单校验问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
1.表单中的校验v-model必须以表单的model:model="form"开头v-model="form.dateRange",因为rules是基于表单进行校验的,当prop为dateRange时,会自动查找this.form.dateRange的值。如果v-model="dateRange"校验失效,查找的值会一直为null
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="日期区间" prop="dateRange">
<el-date-picker
v-model="form.dateRange"
type="daterange"
size="small"
value-format="yyyy-MM-dd"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
</el-form>
2.校验规则
rules: {
dateRange: [
{
type: 'array',
required: true,
message: '请选择日期区间',
fields: {
//tpye类型试情况而定,所以如果返回的是date就改成date
0: { type: 'string', required: true, message: '请选择开始日期' },
1: { type: 'string', required: true, message: '请选择结束日期' }
}
}
]
}
3.初始值赋值使用$set方法,如果直接使用=,后续修改和清除都会失效
//日期区间回显
this.$set(this.form, 'dateRange', [response.data.data.startDate, response.data.data.endDate])
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)