vue+ElementUI动态生成新表单并添加验证

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue+ElementUI动态增加多表单

需求，表中默认有一个with携带参数表，点击添加可以新增一条with数据。并可以动态的增加和删除，利用vue绑定数组对象并循环输出列表。

期初示意图：

点击添加更多携带参数时，新增数据集，如下图所示：

elementUI官网有对单表单的添加，现在对多表单的添加，考虑的实现方式是，先写死一个必须的表单，需要新增表单的放在一个div里，在div中使用v-for生成，达到同时增加的效果。

代码如下：

<!-- 已存在的 -->
          <el-form-item  label="field" prop="field"  :rules="[{required: true, message: \'请完善信息\'}]">
              <el-input v-model="field" placeholder="请输入field"></el-input>
              </el-form-item>
              <el-form-item  label="name" prop="name" :rules="[{required: true, message: \'请完善信息\'}]">
              <el-input v-model="name" placeholder="请输入name"></el-input>
              </el-form-item>
              <el-form-item  label="max" prop="max":rules="[{required: true, message: \'请完善信息\'}]">
              <el-input v-model="max" placeholder="请输入max"></el-input>
        </el-form-item>  
          <!-- 动态生成 -->
          <div class="moreRules">
          <div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key" >
              <el-form-item  label="field" :prop="\'moreNotifyObject.\' + index +\'.field\'"  :rules="[{required: true, message: \'请完善信息\'}]">
              <el-input v-model="item.field" placeholder="请输入field"  class="el-select_box"></el-input>
              </el-form-item>
              <el-form-item  label="name" :prop="\'moreNotifyObject.\'+ index +\'.name\'":rules="[{required: true, message: \'请完善信息\'}]">
              <el-input v-model="item.name" placeholder="请输入name"  class="el-select_box"></el-input>
              </el-form-item>
              <el-form-item  label="max" :prop="\'moreNotifyObject.\'+ index +\'.max\'":rules="[{required: true, message: \'请完善信息\'}]">
              <el-input v-model="item.max" placeholder="请输入max"  class="el-select_box"></el-input>
              </el-form-item>
              <el-button @click="deleteRules(item, index)" >删除</el-button>
          </div>
          </div>

需要注意的一点是：

普通表单验证单项依靠的是prop..而动态生成的表单要用:prop

书写的语法是:prop="\'moreNotifyObject.\' + index +\'.notifyobject\'"，moreNotifyObject是v-for绑定的数组，index是索引，notifyobject是表单绑定的v-model的名称，然后用.把他们链接起来。

所以总结起来的语法就是:prop="\'v-for绑定的数组.\' + index + \'.v-model绑定的变量\'"

还有一个需要注意就是v-for的写法，要将表单的model名写进去

<div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key">

 数据代码如下：

addForm:{
            name:\'\',
            content:\'\',
            moreNotifyObject:[{
              field:\'\',
              name:\'\',
              max:\'\'
            }]
        },

数据初始化：

// 数据初始化
      initData(){
            this.addForm.moreNotifyObject = []
      },

点击新增按钮时代码：

 addUser() {
            this.addForm.moreNotifyObject.push({
                field:\'\',
                name:\'\',
                max:\'\',
          })
      },

删除行：

      deleteRules(item, index) {
            this.index = this.addForm.moreNotifyObject.indexOf(item)
            if (index !== -1) {
                this.addForm.moreNotifyObject.splice(index, 1)
            }
      },

参考文章：https://blog.csdn.net/weixin_41041379/article/details/81908788

以上是 vue+ElementUI动态生成新表单并添加验证 的全部内容， 来源链接： utcz.com/z/378063.html

回到顶部