Element drop-down box/cascading selector pop-up window verification related problem records

The problem is described as follows:

1. After adding data and submitting it, open the pop-up window and immediately verify that the prompt is empty;

2. When you click Cancel to close the pop-up window, the flash verification is empty;

3. Open the bound data pop-up window, click to close and then open other unbound data pop-up windows, and the verification will disappear;

4. Open a pop-up window with data, click Cancel to close the pop-up window, open a pop-up window with unbound data and the data is not cleared;

5. Get the entire form verification status/get the verification status of a single category;

6. Solve the problem that the drop-down box/cascading selector still prompts empty after selecting data;

1. After adding data and submitting it, open the pop-up window and immediately verify that the prompt is empty.

Solution :

//表单v-for生成，故$refs为数组
//解决绑定成功后再打开表单，数据反显第一条校验为空问题
this.$nextTick(() => this.$refs.classForm[0].clearValidate())

2. When you click Cancel to close the pop-up window, the flash verification is empty.

solve:

// 解决弹窗取消闪现校验为空问题
this.$nextTick(() => this.$refs.classForm[0].resetFields()) 
this.addclass.outerVisible = false

3. Open the bound data pop-up window, click to close and then open other unbound data pop-up windows, and the verification will disappear.

At first, use this.addclass.outer.splice(1,this.addclass.outer.length) to cut off the rest of the data, leaving only one piece. As a result, the verification of the remaining piece has passed. At this time, click on the pop-up window. The rules for verification are gone.

this.addclass.outer = []
this.addclass.outer = [ {  // 重新添加校验
     subject:'' ,
     class:[],
     rules:{
            subject:[{required: true, message: '请输入科目', trigger: 'blur'}],
            class:[{required: true, message: '请选择班级', trigger: 'blur'}]
           }
} ]
this.addclass.outerVisible = false

4. Open a pop-up window with data, click Cancel to close the pop-up window, open a pop-up window with unbound data and the data is not cleared.

The above processing also solves this problem

5. Get the verification status of the entire form/get the verification status of a single category

this.$refs.form.validate(valid => {
   if (valid) {
      console.log("成功")
   } else {
      console.log("失败")
   }
})
this.$refs.form.validateField("password", valid => {
  if (valid) {
    console.log("校验未通过");
  } else {
    console.log("校验通过");
  }
});

6. Solve the problem that the drop-down box/cascading selector still prompts empty after selecting data

As shown in the figure: After triggering the verification, the data is selected, but the verification is still empty.

Solution: Add @change event in drop-down box/cascading selector

<el-form-item label="科目:" prop="subject">
    <el-select v-model="item.subject" placeholder="请选择" no-data-text="暂无数据" @change="handleSelect">
          <el-option v-for="item in subjectOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
</el-form-item>
<el-form-item label="班级:" prop="class">
    <el-cascader ref="cascader" v-model="item.class" :options="classTree" :props="{ multiple: true }" clearable placeholder="请选择" @change="handleChange"></el-cascader>
</el-form-item>

// 级联选择器值（下拉框同，由于表单是v-for生成，有多个，所以使用for循环）
handleChange(){
    for( var i = 0; i < this.$refs.classForm.length; i++ ) {
         this.$refs.classForm[i].validateField('class', (valid) => {
               // 啥也没做，但是开启了校验状态，解决选择了数据校验仍为空的问题
          })
     }
},