Vue+Element UI 下,如何给一个表单设置自定义规则或多个验证规则(:rules)

       依旧是公司里那个Vue+Element UI的项目。今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示。放图:

Vue+Element UI 下,如何给一个表单设置自定义规则或多个验证规则(:rules)_第1张图片

 

Vue+Element UI 下,如何给一个表单设置自定义规则或多个验证规则(:rules)_第2张图片

       大概就是这个样子。由后台返回的“发放方式”的数值,控制下面几个input框是否显示。这个实现比较简单,只需要把下面几个框用一个包裹起来,加上一个v-show=""的判断条件即可,但它们的表单验证让我为难了,因为只看Element UI官网给的方法来看,:rules="rules"只在data下面绑定了一个rules对象,可我这明显需要两套,即如果发放方式为"平台代发"时,只验证一个"发放方式"否则则全部验证。

       花了一点时间摸索,我想:如果不像官方给的那样,rules="rules",然后在data下设置rules的值,而是把rules绑定一个函数,这个函数在computed计算属性中,根据不同的条件设置不同的验证方法不就可以了?自己尝试了一下,真的成功了,代码如下:






                    
                    

你可能感兴趣的:(Vue,前端)