当前位置:   article > 正文

【Element Ui】 vue3中修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息_表单 rules 修改required 校验不生效

表单 rules 修改required 校验不生效

项目要求:类型为“业务备货”的时候,“客户”为必填项

效果如下:

代码如下:

  1. <!-- :validate-on-rule-change="false" 是为了阻止更改rules时立即触发校验-->
  2. <el-form :model="form" ref="orderForm" :rules="formRules" :validate-on-rule-change="false">
  3. <el-form-item label="类型" prop="type">
  4. <el-radio-group v-model="form.type" @change="needCustNm">
  5. <el-radio-button value="1" label="采购备货"></el-radio-button>
  6. <el-radio-button value="2" label="业务备货"></el-radio-button>
  7. </el-radio-group>
  8. </el-form-item>
  9. <el-form-item label="客户" prop="custNm">
  10. <el-input v-model="form.custNm" placeholder="请输入客户"></el-input>
  11. </el-form-item>
  12. </el-form>
  13. ......
  14. // 初始化设置
  15. const formRules = ref({
  16. type: [
  17. {
  18. required: true,
  19. message: '请选择类型',
  20. trigger: 'change',
  21. },
  22. ]
  23. });
  24. // 切换类型时
  25. function needCustNm(){
  26. if(form.value.type == '2'){
  27. formRules.value = {
  28. type: [
  29. {
  30. required: true,
  31. message: '请选择类型',
  32. trigger: 'change',
  33. },
  34. ],
  35. custNm:[
  36. {
  37. required: true,
  38. message: '请输入客户',
  39. trigger: 'change',
  40. },
  41. ]
  42. }
  43. }else{
  44. formRules.value = {
  45. type: [
  46. {
  47. required: true,
  48. message: '请选择类型',
  49. trigger: 'change',
  50. },
  51. ]
  52. }
  53. // 需要加nextTick,不然获取不到
  54. nextTick(()=>{
  55. // 清除校验效果
  56. proxy.$refs["orderForm"] && proxy.$refs["orderForm"].clearValidate()
  57. })
  58. }
  59. }

重点:

 :validate-on-rule-change="false" 是为了阻止更改rules时立即触发校验
  1. nextTick(()=>{
  2. // 清除校验效果
  3. proxy.$refs["orderForm"] && proxy.$refs["orderForm"].clearValidate()
  4. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/472370
推荐阅读
相关标签
  

闽ICP备14008679号