学无先后,达者为师

网站首页 编程语言 正文

el-form表单新增表单项动态校验;el-form校验动态表单v-if不生效;

作者:i_am_a_div_日积月累_ 更新时间: 2022-07-03 编程语言

一、新增和删除表单项,动态校验。

el-form表单动态动态新增表单进行校验。直接参考 动态增减表单项

在这里插入图片描述

二、el-form表单校验v-if不生效、el-form表单校验v-show不生效

例如有个表单项,通过控制显示两个不同的表单项内容,分别需要校验对应的表单项即可。
如果是直接用v-if,会发现切换时候,校验不生效;
如果直接使用v-show,又发现即使不切换,隐藏了另外的表单项,也会触发校验规则。
正确做法是:使用v-if控制表单项的显示隐藏,同时需要给el-form-item加上自己的 prop=" " 和 key=" " ,这样才能区分。当然:rules 也要有自己对应的提示。在这里插入图片描述

    <template v-if="flag">
      <el-form-item label="姓名:" prop="name" key="name" :rules="rules.name">
        <el-input v-model="formData.name" placeholder=""></el-input>
      </el-form-item>
    </template>
    <template v-else>
      <el-form-item label="退回原因:" prop="desc" key="desc" :rules="rules.desc">
        <el-input type="textarea" maxlength="500" show-word-limit v-model="formData.desc" placeholder="请填写退回原因"></el-input>
      </el-form-item>
    </template>

原文链接:https://blog.csdn.net/i_am_a_div/article/details/125544267

栏目分类
最近更新