前提
在B端项目中,新增弹窗打开后,会出现根据某个选项显示(or隐藏)某个内容及其校验的条件。
比如:
当周期选择工作日时
| 类型 | 是否必填 |
|---|---|
| 工作日志 | 是 |
| 日记 | 否 |
当周期选择周末时
| 类型 | 是否必填 |
|---|---|
| 工作日志 | 否 |
| 日记 | 是 |
问题
多次切换状态时(prop绑定的初始值也会变化),偶尔会出现校验错误或者不校验的情况。
解决方案
设置传入prop的值为变量
在当前状态下,变量值确定了该项是否受表单的校验控制。
- 通过computed计算改变prop取的值。
- 传入prop的初始值需要非空。所以当该项不校验时,随便传一个rules中未定义的值即可。
分析
暂时没有想到为什么将值直接绑定在dom上会失效
比如:
<el-form-item label="省/市/区" :prop="this.type == '5' ? 'place' : 's'" v-show="type == '5'">
...
</el-form-item>
参考:CSDN