在工作中遇到这样一个场景:需要在选中表单的某一项的时候才填某些数据,不选的时候就不需要填写,但是我们用elemnt-ui的时候,肯定都是写了验证的,怎么解决?
看了一些解决方法,有这样的方案:ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题_夜色芜染的博客-CSDN博客_element 表单禁用
他用的是v-if进行表单元素的切换,想来想去还是只有这样做,就是用了。还可以在外面添加过度的效果,看起来好看一点。
<transition name="el-fade-in-linear">
// 利用v-if="info.yjpl != 1"来对元素进行显示哥隐藏的切换
<el-form-item label="日喝水量" prop="ryjl" key='ryjl' v-if="info.yjpl != 1" >
平均<el-input-number :disabled="info.yjpl == 1" v-model="info.ryjl" controls- position="right" placeholder="请输入内容" ></el-input-number> ml
</el-form-item>
</transition>
如果验证的时候,选择的是不需要喝水的按钮,就在验证里面这样写:
var validatorYjpl = (rule, value,callback) => {
if (value == "1") {
// 将所有的喝水情况清空
this.info.ryjl = undefined
this.info.sfjj = ""
this.info.yjnl = undefined
this.info.jjnl = undefined
this.info.ksyjnl = undefined
this.info.sfzj = ""
this.info.yjzl = []
this.info.yjzl_input = ""
// 害怕element-ui会做验证,就处理一下,不用应该耶没有关系
setTimeout(() => {
this.$refs.infoRef.clearValidate(this.info.ryjl)
this.$refs.infoRef.clearValidate(this.info.sfjj)
this.$refs.infoRef.clearValidate(this.info.jjnl)
this.$refs.infoRef.clearValidate(this.info.ksyjnl)
this.$refs.infoRef.clearValidate(this.info.sfzj)
this.$refs.infoRef.clearValidate(this.info.yjzl)
});
}
callback()
}
现在就可以解决验证表单的问题了。
ps:表单验证要写callback()