vue-element-admin我踩的坑（7）

先说个简单的，表单校验问题，表格里面的prop必须和v-model绑定的变量名一致！

如element-ui官网的代码：

<el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item>

---

另外一个表单校验问题

背景：

界面上新增及更新按钮，弹窗进行表单填写及提交。

对于新增及更新的弹窗，代码里面实际用了同一个表单form，更新的时候就是把row对于值带入form，因此等于是更新和新增都绑定了同一个对象变量。

使用上面element-ui官网的代码做示例：

新增按钮

id	data1	action
112	2019-01-01	更新按钮

 

 

 

<el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item>

 

rules: {
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ]
        }

问题：

打开新增弹窗，触发rules校验不通过（即出现红色提示小字），点击弹窗的取消键。

打开更新弹窗，发现即使date1日期输入框输入了日期，还是会出现校验不通过的情况，并且怎么输入都是校验不通过，即trigger不起作用

只能再打开新增弹窗，触发rules校验通过，然后回到更新弹窗才恢复正常

解决：

经过查找，发现代码里面打开新增窗口，触发了校验，关闭窗口后，ruleForm.date1就产生了（值是undefined），然后打开更新窗口，ruleForm.date1带了过来，虽然代码通过重新复制，改变了ruleForm.date1的值，但校验不通过的结果也带了过来（没法再次触发校验的问题没找到原因，有兴趣的可以看element源码）。解决方案就是在更新窗口给ruleForm.date1赋值前先重置ruleForm对象：ruleForm = {}，这样就把之前的校验结果给清除了。

以防万一，再在更新窗口中赋值后加上下面代码

this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })