el-input设置必填提示（单个&多个）

有两种:一种是多个el-input通过同一个el-form表单来限制,这种用得最多的地方就是添加和修改功能;另一种是每个el-input通过各自的el-form表单来限制,这种通常是用在动态添加多个输入框等功能上，话不多说，上才艺噻.

第一种（多个el-input同时限制）：

举栗（element-ui官网的案例）：

HTML代码:

  
  
    
  
  
    
      
      
    
  
  
    
      
        
      
    
    -
    
      
        
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    重置
  

JavaScript代码:

第二种(对单个el-input设置必填限制):

我是自己封装的组件,暂时没想到其他的方式,目前看来是能符合功能需求的。

1.定义组件input-required.vue

html代码：

javascript代码：

2.在要用到的地方引入使用组件

// 1.引入组件路径
import InputRequired from "./components/input-required.vue";

// 2.注册组件
components: {
    InputRequired
  },

// 3.使用组件 里面的disabled等属性按照自己需求添加就行,但是注意需要使用冒号 : 动态绑定数据
//   (1)这里的propValue是自定义组件里prop要绑定的属性,以及form中的属性;
//   (2)labelValue是自定义组件中label的值;
//   (3)isDisalbed是决定自定义组件中disabled是否启用;
//   (4)updateData方法用处是子组件内校验成功后触发父组件更新数据;

成功(*^▽^*)!

----------------------------------------------------手动分割线------------------------------------------

今天下午写着写着突然想到,需求好像又不完全像上面的第二种一样,再更新一下吧,而且个人用着感觉这一版可能判断更精准一点.

需求是点击确认按钮,会判断参数值是否都填写了,但凡有一个没填写都会提示需要填写完整;只有所有的都填写完整才会继续往下运行.

 代码更新:

 自定义组件内方法作如下修改:

isValid() {
      let flag = null;
      this.form[this.propValue] = this.value;
      this.$refs["formRef"].validate(valid => {
        if (valid) {
          flag = true;
          this.$emit("updateData", this.form, this.indexValue);
        } else {
          flag = false;
        }
      });
     // 把每次校验的结果返回给父组件
      return flag;
    }

 父组件内判断是否全部填写完毕:

// 确认配置完成,生成模型配置信息
    submit() {
      let flag = true;
      // flag并上每一行校验的结果,如果全部填写,最后就是true,但凡有一行没有填写,flag都会是false
      for (let index = 0; index < this.algorithmParamOptions.length; index++) {
        flag = flag && this.$refs[`required` + index].isValid();
      }
      if (flag) {
        .......
      } else {
        this.$modal.msgError("请先填写完整!");
      }
    },