zoukankan      html  css  js  c++  java
  • v-if和v-show 导致elementui 表单验证bug

    使用el-form来做表单验证时,有时候选择的条件不同,展示的el-form-item也不一样,
    这时候就需要控制输入框的展示与隐藏

    特别是再tab标签切换的时候遇到最多,每个tab下面显示不通的el-form-item

    我使用v-show时,提交表单时会遇到validate验证不通过,因为虽然v-show=false了,但实际是渲染了dom的,也参与了表单验证。

    所以我又改成了v-if

    改后又遇到另一个bug

    相同的两个el-form-item,有一个验证失效,开始我还以为是prop没有写对,认真对比后发现,是正确的

    ,接着又继续找解决办法。。。。

    最后是在el-form-item  上加key值解决的

    上代码:

    key值保证唯一性就可以了

    清空验证:

     this.$nextTick(() => {
            this.$refs["discount_AddForm"].clearValidate();
          });
     
    重置验证表单:
      if (this.$refs["discount_AddForm"]) {
            //重置表单
           this.$refs["discount_AddForm"].resetFields();
             this.$refs["discount_AddForm"].clearValidate();

      }

  • 相关阅读:
    AD 快捷键
    AD PCB 错误检查
    AD 在 PCB导出封装库
    AD PCB 机械层 画板步骤
    不同频率对PCB材料的要求
    RF 天线长度,通信距离估算
    RF硬件检查注意事项
    影响RSSI的因素
    阅读与思考
    面向对象特性分析
  • 原文地址:https://www.cnblogs.com/yixiaoyang-/p/13398684.html
Copyright © 2011-2022 走看看