element ui 表单验证时prop传值问题

256 阅读1分钟

前提

在B端项目中,新增弹窗打开后,会出现根据某个选项显示(or隐藏)某个内容及其校验的条件。

比如:

当周期选择工作日时

类型是否必填
工作日志
日记

当周期选择周末时

类型是否必填
工作日志
日记

问题

多次切换状态时(prop绑定的初始值也会变化),偶尔会出现校验错误或者不校验的情况。


解决方案

设置传入prop的值为变量

在当前状态下,变量值确定了该项是否受表单的校验控制。

  • 通过computed计算改变prop取的值。
  • 传入prop的初始值需要非空。所以当该项不校验时,随便传一个rules中未定义的值即可。

image.png


分析

暂时没有想到为什么将值直接绑定在dom上会失效

比如:

  <el-form-item label="省/市/区" :prop="this.type == '5' ? 'place' : 's'" v-show="type == '5'">
  ...
  </el-form-item>

参考:CSDN

链接:blog.csdn.net/mineblogjw/…