前言

给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-columnlabel="指标参数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-columnlabel="指标参数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-columnlabel="指标参数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-columnlabel="指标参数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-columnlabel="指标参数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>