问题描述 : 在elementUI中 , Form表单设置了rules校验规则 , 正常情况下 , 进页面是不会触发校验规则的 , 但是select下拉框设置了multiple 多选属性之后 , 就会产生bug . 原因是select下拉框设置多选属性之后 , 进页面就会触发change事件导致触发校验规则 , 如图
bug现象
解决方案 :
1 . 在 created 钩子函数中 , 默认将绑定的值设置为空数组 this.$set(this.rowData, 'reason', []) /* this.rowData为props接收的对象, reason是select下拉框v-model绑定的值 */
解决方案1
2 . 其他同事的做法 , 设置一个data值 , 校验的时候去控制
解决方案2
3 . 之前在网上看的方法 , 其实感觉不是很正确哈 , 应该是我水平低了 , 我写的时候 , 会发生其他的bug. 使用 this.$refs.editForm.resetFields() 在created中清空form表单的校验 , 注意要写在 nextTict中 , 方法比较暴力 , 确实可以将检验关闭 , 但是我这边产生了bug , 就是其他的input输入框 , 不能渲染输入的内容 , 每次输入的内容都会被清掉 ... 有兴趣的可以研究一下 , 然后给我留言哦 ~
未解决bug的方案