el-form动态检验无法生效问题(已解决)

要对el-form里面的字段动态生成校验规则,测试了一系列的骚操作也无法生效,要么是require视图生效了,校验规则还是不生效;看了csdn里面好多方案,都是废话,废话,直接上硬货,最终总结如下:

javascript 复制代码
         <el-form :rules="rules" ref="auditForm" :model="auditForm" label-width="100px">
            <el-form-item label="审核结果:" prop="auditStatus">
              <el-radio-group v-model="auditForm.auditStatus" @change="updateFormRules">
                <el-radio label="Y">通过</el-radio>
                <el-radio label="N">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审核意见:" prop="remark">
              <el-input
                v-model="auditForm.remark"
                placeholder="请输入"
                type="textarea"
                :rows="2"
                clearable
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-form>

需求描述:选择审核结果为"N",不通过时,审核意见为必填,否则为不必填。

原本的rules里面不必去填写审核意见的校验

javascript 复制代码
     rules: {
        auditStatus: [{ required: true, message: '请选择', trigger: 'blur' }]
      },

方案一:监听审核结果的change事件,去动态增加审核意见的规则

方案二:使用watch去监听审核结果的值,去动态增加审核意见的规则

javascript 复制代码
    updateFormRules () {
      if (this.auditForm.auditStatus === 'N') {
        this.$set(this.rules, 'remark', [
          { required: true, message: '请输入审核意见', trigger: 'blur' },
          { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
        ]);
      } else {
        this.$set(this.rules, 'remark', []);
      }
      this.$nextTick(() => {
        this.$refs.auditForm.clearValidate(); // 清除表单验证规则
        this.$refs.auditForm.validate(); // 重新验证表单
      });
    },```
    
相关推荐
慧一居士8 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead10 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js