vue+el-form表单验证、提交及重置

表单验证后输入正确值错误提示不消失

不满足以下条件可能就出现验证不走心的状态~~~

el-input绑定的v-model值需要在formData里面定义，因为是双向绑定去进行验证
el-input（el-select）绑定的model值与规则指定的值对应
el-form-item里面的label值与model值对应

正确实例：

<el-form :model="formData" :rules="rules" ref="editForm">
    <el-form-item label="编号" prop="schoolVal">
        <el-input v-model="formData.schoolVal" :disabled="true"></el-input>
    </el-form-item>
</el-form>
<script>
export default{
  data (){
    return {
      formData: {
          schoolVal: ""
      },
      rules: {
        schoolVal: [{ required: true, message: "请选择学校", trigger: "change" }],
      },
    }
  }
}
</script>

童鞋们~ 你们一定也遇到过对象中的对象无法验证的情况吧

验证el-form对象嵌套对象
如：model绑定的formData中内层user也是一个对象，现在想要对tel进行校验，在prop中传递user.tel，并且在rules中也要指定"ueser.tel"即可(一定要是字符串！)。

举个栗子~~

<template>
  <el-form :model="formData" :rules="formRule" ref="formData" label-width="100px">
        <el-form-item prop="name" label="姓名">
            <el-input v-model="formData.name" ></el-input>
        </el-form-item>
        <el-form-item prop="user.tel" label="手机号" >
          <el-input v-model="formData.user.tel" ></el-input>
        </el-form-item>
        <el-form-item prop="phones[0].model" label="手机号">
          <el-input v-model="formData.phones[0].model"></el-input>
        </el-form-item>
        <el-form-item v-for="(phone, index) in formData.phones" :label="phone.brand" :key="phone.brand" :prop="'phones.' + index + '.model'" :rules="{
         required: true, message: 'model不能为空', trigger: 'blur'
         }">
            <el-input v-model="phone.model"></el-input>
            <el-form :model="formData.phones[index]" label-width="100px">
                 <el-form-item v-for="(item, index1) in formData.phones[index].arr" :key="index1" :prop="'arr.' + index1 +  '.data1'" label="data1" :rules="{
                 required: true, message: 'data1不能为空', trigger: 'blur'
                 }">
                     <el-input v-model="item.data1"></el-input>
                 </el-form-item>
           </el-form>
        </el-form-item>
    </el-form>
    <el-button @click="handleSubmit">提交</el-button>    
</template>

data () {
    return {
      formData:{
          name: '',
          user: { tel: '' },
           phones: [
              { brand: "华为", model: "", arr: [{ data1: "" }] },
              { brand: "小米", model: "", arr: [{ data1: "" }] }
          ] 
      },
      formRule:{
        name: [{required: true, message: '不能为空', trigger: 'blur'},
                {pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文', trigger: 'blur'}],
        'user.tel' : [{required: true, message: '手机号码不能为空', trigger: 'blur'}],
        'phones[0].model': [{required: true, message: 'model不能为空', trigger: 'blur'}],
      },
    }
  },

methods: {
    handleSubmit(){
        const t = this;
        t.$refs['formData'].validate((valid) => {
            if(valid){
              console.log(this.formData);
            }
        })
    }
  }

https://segmentfault.com/a/1190000014366951?_ea=3779275

重置表单条件

有两种方法，如下：

el-form需要接收一个model，并且需要配合el-form-item一起使用，并且在el-form-item上绑定prop属性，resetField方法才能好使.
接着上面的代码：

rest() {
        this.$refs.formData.resetFields()
      }

2.没有使用el-form表单的重置
this.$options.data()是vue实例初始化时的data数据，只读属性

 reset() {
      console.log(this.$options.data())
      _.assign(this.$data.formData,this.$options.data().formData)
    }

el-date-picker
不允许选当前之前日期

<template>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions1">
    </el-date-picker>
</template>

 export default {
    data() {
      return {
        pickerOptions1: {
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        }       
      }
    }
  }

监听计算属性
（计算属性+el-form进行表单验证）=> 利用value给v-model赋值

<el-form-item class="select-point" label="课程名称" prop="courseName">
    <el-input placeholder="请输入课程名称" v-model="formData.courseName" clearable :value="courseName+formData.courseName "></el-input>
</el-form-item>

computed:{
    //课程名称-学年学季年级学科（限制30字）
    courseName(){
      let data = this.formData,gradeName,seasonName,yearName,subjectName;
      let {gradeId, yearId, seasonId, subjectId} = data;
        gradeName = (gradeId && this.gradeName.filter(d => d.value === gradeId)[0].label) || '';
        seasonName = (seasonId && this.seasonName.filter(d => d.value === seasonId)[0].label) || '';
        yearName = (yearId && this.schoolYearName.filter(d => d.value === yearId)[0].label) || '';
        subjectName = (subjectId && this.subjectName.filter(d => d.value === subjectId)[0].label) || '';
        let name = yearName + seasonName + gradeName  + subjectName;
            this.$set(this.formData,'courseName' ,name);
    },
}

el-input 在被赋值后不可编辑
解决方法一、
改变data数据初始值

input: {
  description:''
},

解决方法二、

methods:{
   memoStyleChange(item) {
       if (item == 1) {
           this.$set(this.input, 'description', 'Listing is still available')
       } else {
           this.$set(this.input, 'description', 'Landlord could not be reached')
       }
}

原因在于在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api $set()：

$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了