Vue2 +Elementui 动态、批量 创建 form表单 & 表单校验

前言

特别是在一些常见的后管系统，会遇见 动态 创建/复制 表单，本次实例 以 Vue2 + Elementui 为例，输出一个Demo，效果如下图：

实例图

新增后的效果如下：

如上图便是 我们要实现的效果，代码如下：

代码

1、Html

  <div class="page">
    <div class="home-title">
      功能添加
    </div>
    <div class="add-btn flex">
      <span class="add-btn__icon">+</span>
      <span class="add-btn__text" @click="handleAddForm">新增功能</span>
    </div>
    <el-form ref="form" :model="form" class="page-form" label-width="120px" style="width:650px;" label-position="left" :rules="rules">
      <div v-for="(item, index) in form.dynamicItem" :key="index" class="page-form__list">
        <el-form-item
          label="功能模块名称"
          :prop="'dynamicItem.' + index + '.a'"
          :rules="{required: true, message: '请输入该模块名称', trigger: 'blur'}"
        >
          <el-input v-model="item.a" placeholder="请输入该模块名称" clearable />
        </el-form-item>
        <el-form-item
          label="图片上传"
          :prop="'dynamicItem.' + index + '.b'"
          :rules="{required: false, message: '请上传图片', trigger: 'blur'}"
        >
        </el-form-item>
        <el-form-item
          label="文案标题"
          :prop="'dynamicItem.' + index + '.c'"
          :rules="{required: true, message: '请输入文案标题', trigger: 'blur'}"
        >
          <el-input v-model="item.c" placeholder="请输入文案标题" clearable />
        </el-form-item>
        <el-form-item
          label="文案内容"
          :prop="'dynamicItem.' + index + '.d'"
          :rules="{required: true, message: '请输入文案内容', trigger: 'blur'}"
        >
          <el-input type="textarea" :rows="4" v-model="item.d" placeholder="注意：字数请在100字以内" clearable />
        </el-form-item>
        <el-form-item v-if="form.dynamicItem.length > 1" style="position:absolute;right:-60px;top:0px;">
          <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" class="submit-btn" @click="submit">发布</el-button>
        <el-button type="primary" class="common-btn">预览</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

2、JS部分

export default {
  data() {
    return {
      form: {
        dynamicItem: [{
          a: '',
          b: '',
          c: '',
          d: ''
        }]
      }
    }
  },
  methods: {
    // 提交
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log(this.form)
        }
      })
    },
    // 新增
    handleAddForm() {
      this.form.dynamicItem.push({
        a: '',
        b: '',
        c: '',
        d: ''
      })
    },
    // 删除操作
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1)
    }
  }
}

css样式就不贴了，下面进行原理分析：

原理分析

我们需要把form表单每一项绑定的值组成一个对象，对象叠加组成了一个对象数组，循环对象数组每一项生成的一个form表单。当点击新增一项时，其实就是给form表单对象数组添加一个对象，删除则反之。

如有疑问，可留言，欢迎沟通～