在vue里面，element ui，el-select表单选中校验失败

项目场景：

在element 表单中我们需要校验，当表单中有数据变动时，会触发检验。

---

问题描述

提示：这里描述项目中遇到的问题：

在项目中，提交时下拉菜单没有选，会触发校验提示，去选中下拉菜单的数据，不会再次触发校验，导致校验提示文字依然存在

---

原因分析：

一般来说遇到了校验失效问题，有值的情况下，校验规则并没有对应消失，有几个易错的地方

1. 表单使用了v-model，而不是model，我这里ok的

 <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      label-position='left'
      size="small">

2. 对应的下来菜单是否添加了prop属性，发现我的有

 <el-form-item label="问题类型" prop="feedBackType" v-if="roleType === 'jgRole'">
        <el-select v-model="ruleForm.feedBackType" placeholder="请选择问题类型" >
          <el-option label="数据问题（数据缺失或不正确）" value="dataProblem"></el-option>
          <el-option label="功能问题（BUG）" value="functionalProblem"></el-option>
          <el-option label="业务咨询" value="businessConsulting"></el-option>
          <el-option label="功能建议" value="functionalAdvise"></el-option>
        </el-select>

3. 检查rules,里面校验提示的事件是否正确，发现了问题，el-select校验规则里面的trigger应该是change，我写成了rule

rules: {
        description: [
          {required: true, message: '内容不能为空', trigger: 'blur'},
        ],
        feedBackType: [
          {required: true, message: '请选择问题类型', trigger: 'change'},
        ],
        file: [
          {message: '请上传附件', trigger: 'change', required: true,}
        ]
      },

4. 我百度到了其他两种常见情况。因为嵌套太深入，导致from检测不到ruleForm的变化

---

解决方案：

上面出现的几种情况。前三种细心一点就可以避免发生，第四种问题相较于最难的

第四种情况解决方案

1. 添加change事件在里面强制更新dom触发（视图更新）

change(val){
   	this.$set(this.addForm,'tableName',val)
   	this.$forceUpdate()
   }

2. 再change事件里面对form表单绑定的数据进行拷贝 this.ruleForm= JSON.parse(JSON.stringify(this.ruleForm));或者 像这样描述下 this.ruleForm= { …this.ruleForm};

change(val){
  	this.addForm={...this.addForm}
  }