vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法

• 数据库

vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法

先看一下效果图（想在表单里动态的增删 form-item，然后添加rules，校验其必填项；

）:

在这里插入图片描述

html部分

    <el-form-item label="名称:"
    :prop="'labels.' + index + '.name'"
    :rules="{
          required: true, message: '请输入', trigger: 'blur'
    }"
    class="middleInput">
      
      
       1)" @click.prevent="removeKey(item, index)">
    
    <el-form-item label="值:"
    :prop="'labels.' + index + '.value'"
    :rules="{
          required: true, message: '请输入', trigger: 'blur'
    }"
    class="middleInput">

js

//data:
form: {
    labels: [{
    	name: '',
    	value: ''
    }]
},

// methods:
addKey (item) {
  this.form.labels.push({
    name: '',
    value: ''
  })
},
removeKey (item, index) {
  this.form.labels.splice(index, 1)
},

注意

核心代码：

:prop="'labels.' + index + '.name'"
:rules="{
       required: true, message: '请输入', trigger: 'blur'
 }"
  • prop里的值有格式要求，以本demo为例：“表单属性数组key名 + ‘.’ + 索引值 + ‘.’ + 数组里对象的key名”；
  • rules里填写校验不成功触发条件和提示语；

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/fa32435897.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐