欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

element-ui表单验证无效解决

程序员文章站 2022-05-18 20:16:04
最近在项目中遇到了一个需求,需要动态增减表单元素,同时给新增的表单元素增加校验规则。 element-ui官网给出了解决方案:点击新增按钮时,向循环渲染的数组中push新的对象,数据驱动视图,通过增加数据的方式来增加新的dom元素;同样的,通过删除循环遍历的数据来达到删除dom的效果。 但是,校验规 ......

最近在项目中遇到了一个需求,需要动态增减表单元素,同时给新增的表单元素增加校验规则。

element-ui官网给出了解决方案:点击新增按钮时,向循环渲染的数组中push新的对象,数据驱动视图,通过增加数据的方式来增加新的dom元素;同样的,通过删除循环遍历的数据来达到删除dom的效果。

但是,校验规则不起作用,即使填写了表单已经提示未填写。在仔细检查后发现,element-ui的表单校验规则中,el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。但和通常表单不同的是,该表单是动态增减的,对应el-form-item需要绑定的prop值必须带上遍历的索引值index:

<el-form ref="..." :model="test">
  <div v-for="(item, index) in test.line" :key="index">
    <el-form-item :prop="'line.'+index+'.value1'" :rules="{...}">
      <el-input v-model="item.value1"></el-input>
    </el-form-item>
    <el-form-item :prop="'line.'+index+'.value2'" :rules="{...}">
      <el-input v-model="item.value2"></el-input>
    </el-form-item>
  <div>
</el-form>

<script>
export default {
  data() {
    return {
      test: {
        ...,
      line: [{
          value1: '',
          value2: ''
        }]
      }
    }
  }
}
</script>

 

完整代码见element-ui官网的动态增减表单项