element-ui 表单里面的字段根据条件展示时，不同情况下对不同字段进行校验

最新推荐文章于 2025-03-07 15:53:14 发布

m0_66899315

最新推荐文章于 2025-03-07 15:53:14 发布

阅读量1.8k

点赞数

文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/m0_66899315/article/details/124494912

版权

本文介绍了在Element-UI中，如何处理表单字段根据条件展示时的动态校验问题。当编码项目code的值改变，导致表单字段显示与隐藏变化时，原有的校验规则不再适用。为解决这个问题，提出了将校验规则放入计算属性中的方法，以避免在保存时对隐藏字段进行无效校验，确保valid状态正确。同时，为防止el-select组件失效，文章还建议在change事件中更新DOM或维护表单数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上图吧，

表单里面的表字段以及其他字段展示与隐藏，都是根据编码项目code的值来决定的，

这种切换，对应表单字段也有变化的情况下，校验规则直接定义在data里面就不那么友好了，校验规则多了，在点击保存时，会把隐藏的值校验，导致，当前字段明明有值，也没有错误校验，但是提交表单时候，valid始终为false, 解决方法：修改rules的配置，放在计算属性里面。

上代码：

 computed: {
    rules() {
      let flag = {
        codeType: [
          { required: true, message: `编码项目不能为空`, trigger: "blur" }
        ]
      };
      switch (this.addForm.codeType) {
        case "1":
          flag = {
            ...flag,
            fixedValue: [
              { required: true, message: `展示格式不能为空`, trigger: "blur" }
            ]
          };
          break;
        case "2":
          flag = {
            ...flag,
            fieldName: [
              { required: true, message: `表字段不能为空`, trigger: "change" }
            ],
            length: [
              { required: true, message: `长度不能为空`, trigger: "blur" }
            ]
          };
          break;
        case "3":
          flag = {
            ...flag,
            dateFormat: [
              { required: true, message: `日期格式不能为空`, trigger: "blur" }
            ]
          };
          break;
        case "4":
          flag = {
            ...flag,
            length: [
              { required: true, message: `长度不能为空`, trigger: "blur" }
            ],
          };
          break;

        default:
          break;
      }
      return flag;
    },
  },

为了防止el-select出现失效情况，可以在其他几个el-select的 change事件中，加上更新dom的代码段或者对表单绑定的数据进行描述

  
   change(val) {
// 方法一 更新dom视图更新
  this.$set(this.addForm, "fieldName", val);
      this.$forceUpdate();    
或者  方法二   进行描述、拷贝
       this.addForm={...this.addForm}
    
    },