提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

给el-table加表单验证，一个很简单的需求。预计开发十分钟，结果用了2个半小时。

---

一、问题描述

简单说下我做的功能，就是配置一组表达式。表达式很简单就几种模式（大于x，小于y，介于x和y之间等）。样子如下图

操作效果只有3类

• 1 没选择指标类型时，指标参数1和2都是disabled的不能输入
• 2 选择非“介于”的指标类型时，指标参数1可以输入，指标参数2为disabled状态不能输入
• 3 选择“介于”的指标类型时，指标参数1和2都能输入

期待的验证效果如下

• 1 没选择指标类型时，指标参数1和2都不验证
• 2 选择非“介于”的指标类型时。对指标参数1做非空和数字验证，指标参数2不验证
• 3 选择“介于”的指标类型时。指标参数1和2都做非空和数字验证

问题就是如何实现期待的验证效果。一共试了三个方案

• 1 利用disabled属性，成功入坑1
• 2 利用el-form-item元素的required属性，成功入坑2
• 3 利用el-form-item元素rules属性，逃出生天

二、利用disabled属性

众所周知被disabled修饰的元素，from表单不会提交。所以我认为被disabled的元素element-ui应该不会做表单验证。于是我给指标参数1和2都加了验证。打算利用disabled达到我的目的。代码如下

//添加验证规则
 rules: [
 	indexParam:[
          { required: true, message: "参数不能为空", trigger: "blur" },
          {pattern: /^\d*(\.\d+)?$/, message: "必须是数字", trigger: "blur"}
        ]
 ]
//规则使用
<el-table-column
label="指标参数1"
   width="170">
   <template slot-scope="scope">
     <el-form-item :prop="'deviceAttrDtoList.'+scope.$index+'.indexParam1'" :rules="rules['indexParam']">
       <el-input :disabled="!scope.row.indexOperator" v-model="scope.row.indexParam1"   placeholder="指标参数" type="text" />
     </el-form-item>
   </template>
 </el-table-column>

 <el-table-column
   label="指标参数2">
   <template slot-scope="scope">
     <el-form-item :prop="'deviceAttrDtoList.'+scope.$index+'.indexParam2'" :rules="rules['indexParam']">
       <el-input :disabled="scope.row.indexOperator!=='between'"  v-model="scope.row.indexParam2"   placeholder="指标参数" type="text" />
     </el-form-item>
   </template>
 </el-table-column>

结果如下

猜测element-ui组件应该有一个开关之类的，通过开关控制disabled属性是否验证。翻了半天官网没找到。后来又百度了会儿无果，此路不通，果断放弃。

三 、 利用el-form-item元素的required属性

在翻阅element-ui官网时，发现了required属性。

required如果为true证明需要做非空验证，反之不验证。这个正好是我对disabled控制的取反。一共两种情况

• 1 required=true并且disabled=false。当前输入框可以输入，输入的内容需要做非空验证
• 2 required=false并且disabled=true。当前输入框不能输入，输入框不做非空验证。

我猜测error应该是自定义文言的。于是我想利用这个来实现我的目标，代码如下

//添加验证规则
 rules: [
 	indexParam:[
          {pattern: /^\d*(\.\d+)?$/, message: "必须是数字", trigger: "blur"}
        ]
 ]
//规则使用
<el-table-column
   label="指标参数1"
   width="170">
   <template slot-scope="scope">
     <el-form-item :required="!!(scope.row.indexOperator)"   :prop="'deviceAttrDtoList.'+scope.$index+'.indexParam1'" :rules="rules['indexParam']" error="参数不能为空">
       <el-input :disabled="!scope.row.indexOperator" v-model="scope.row.indexParam1"   placeholder="指标参数" type="text" />
     </el-form-item>
   </template>
 </el-table-column>

 <el-table-column
   label="指标参数2">
   <template slot-scope="scope">
     <el-form-item :required="!!(scope.row.indexOperator)&&scope.row.indexOperator==='between'" :prop="'deviceAttrDtoList.'+scope.$index+'.indexParam2'" :rules="rules['indexParam']" >
       <el-input :disabled="scope.row.indexOperator!=='between'"  v-model="scope.row.indexParam2"   placeholder="指标参数" type="text" />
     </el-form-item>
   </template>
 </el-table-column>

结果如下，逻辑上达到了我要的效果。但是这个提示语是这样的。通过配置error也无法更改这个提示语。

百度了很久很久，得到的最终结果就是required对应的文言改不了。此路不通。

四 、 利用el-form-item元素rules属性

一样的思路，最终用rules属性达到了我要的效果。即
-1 disabled=false时，rules配置验证规则
-2 disabled=true时，rules不配置验证规则

代码如下

//添加验证规则
 rules: [
 	indexParam:[
          { required: true, message: "参数不能为空", trigger: "blur" },
          {pattern: /^\d*(\.\d+)?$/, message: "必须是数字", trigger: "blur"}
        ]
 ]
//规则使用
<el-table-column
   label="指标参数1"
   width="170">
   <template slot-scope="scope">
     <el-form-item  :prop="'deviceAttrDtoList.'+scope.$index+'.indexParam1'" :rules="!!(scope.row.indexOperator)?rules['indexParam']:{}">
       <el-input :disabled="!scope.row.indexOperator" v-model="scope.row.indexParam1"   placeholder="指标参数" type="text" />
     </el-form-item>
   </template>
 </el-table-column>

 <el-table-column
   label="指标参数2">
   <template slot-scope="scope">
     <el-form-item  :prop="'deviceAttrDtoList.'+scope.$index+'.indexParam2'" :rules="!!(scope.row.indexOperator)&&scope.row.indexOperator==='between'?rules['indexParam']:{}" style="margin-left: 0">
       <el-input :disabled="scope.row.indexOperator!=='between'"  v-model="scope.row.indexParam2"   placeholder="指标参数" type="text" />
     </el-form-item>
   </template>
 </el-table-column>

最终结果

总结

vue代码写的太少了，很多隐藏的坑自己还发现不了。慢慢积累吧