Element UI 表单验证动态变化

需求: 默认情况下姓名字段必填, 再选中匿名checkBox后匿名取消必填

第一步想到rules根据是否匿名来变化

          <el-form-item
              label="姓名："
              prop="extName"
              :rules="isAnonymous == '1' ? [] : nameRules"
            >
              <el-input
                v-model="extName"
                placeholder="请输入姓名"
                maxlength="20"
                show-word-limit
                style="width: calc(100% - 80px); margin-right: 20px"
              />
              <el-checkbox
                v-model="isAnonymous"
                :true-label="1"
                :false-label="0"
                >匿名</el-checkbox
              >
            </el-form-item>

这里nameRules是必填加上中文验证.

这样写之后必填确实变化了,我以为成功了. 直到我无意中先点击了姓名输入框,在输入数字后,中文验证的提醒出了之后,点击匿名.出现下面这种情况了 按照预想,选中匿名后表单验证变为空,应该清空验证才对,结果没有. 再查看Element UI 文档后,增加checkBox change事件监听,在监听事件中写

this.$nextTick(() => {
    this.$refs.extNameItem.clearValidate();
});

extNameItem 为 el-form-item 的ref属性名

添加监听后问题解决