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])
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
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> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐