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

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

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

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

正确实例：

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

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

举个栗子~~

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

• 重置表单条件

有两种方法，如下：

1. 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
不允许选当前之前日期

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

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

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处理成一个响应式的属性，此时视图也会跟着改变了