清除 vue 表单验证残留

清除 vue 级联选择器验证残留

出现情况：

1.点击修改，再点击新增，发现级联选择器的表单验证仍然存在。
2.点击修改，再点击新增保存，发现选择级联中的数据时，表单验证仍然存在
注意：普通的表单用 this.$refs[“definitionForm”].clearValidate();即可清楚验证残留

<el-dialog
      title="新增"
      :visible.sync="definitionTableVisible"
      width="700px"
      :before-close="handleCloseDefinition"
    >
      <el-form
        class="visibleForm"
        ref="definitionForm"
        :model="definitionForm"
        :rules="definitionFormRules"
        label-width="80px"
      >
        <el-form-item label="级联" prop="cbId">
          <el-cascader
            :show-all-levels="false"
            v-model="definitionForm.cbId"
            :options="businessAreaOptions"
            :props="{ checkStrictly: true }"
          >
          </el-cascader>
        </el-form-item>
        </el-form>
        <el-button @click="definitionCancel">取 消</el-button>
        <el-button type="primary" @click="definitionSave">保 存</el-button>
    </el-dialog>
  

<script>
export default {
  data() {
    return {
     definitionForm: {
        cbId: null,
      },
     definitionFormRules: {
        cbId: [
           {
            required: true,
            trigger: "change",
            message: "请选择级联",
          }
         ],
      }
    }
    }
   watch: {
    "definitionForm.cbId"(newval, oldval) {
      console.log(newval, oldval);
      if (oldval) {
        this.definitionFormRules.cbId[0].trigger = "blur";
      } else if (newval) {
        this.definitionFormRules.cbId[0].trigger = "change";
      }
      }
    },
    methods(){
     definitionSave(){
     this.definitionFormRules.cbId[0].trigger = "change";
     }
    }
  }
</script>

我使用监听级联值的变化，去改变验证的trigger值，并且在保存的时候改为change