记录一次使用 el-dialog + el-form 出现的BUG
需求
- 弹出框中包含一个表单
- 表单项 1:
- 下拉框
- 选择类型: 数据源或IT系统
- 表单项 2:
- 下拉框
- 选择数据源中的数据 (单选)
- 表单项 3:
- 下拉框
- 选择IT系统中的数据 (多选)
初始实现
使用 v-if 进行表单项 2 和 3 的显示和隐藏。
出现的BUG
- 当在表单项 2 中选择数据源后
- 切换表单项 1 为 IT系统
- 已选择的数据源的文本会显示在 IT系统的下拉框中
- 该问题仅在 form 表单放在 dialog 中出现
解决方案
- 使用
v-show替换v-if以控制表单项 2 和 3 的显示和隐藏 - 切换时，动态添加或删除
data中rule对象中要校验的表单项 2 或表单项 3
结论
通过更改显示控制指令和动态调整验证规则，解决了在特定配置下出现的BUG。
