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

最新推荐文章于 2024-07-25 17:03:20 发布

京都玩家

最新推荐文章于 2024-07-25 17:03:20 发布

阅读量2k

点赞数 7

分类专栏：大前端从业者 javascript 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/hzaini89/article/details/125660952

版权

javascript 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

大前端从业者

1 篇文章 0 订阅

订阅专栏

本文通过一个Vue2和ElementUI的实例，展示了如何动态创建和复制表单。代码示例中，当点击新增按钮时，表单会添加新的输入字段；删除按钮则相反。表单数据以对象数组形式存储，每个对象对应表单的一行。文章还提供了关键代码和原理分析，帮助理解动态表单的实现方式。

摘要由CSDN通过智能技术生成

前言

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

实例图

常见的form表单
新增后的效果如下：

在这里插入图片描述
如上图便是我们要实现的效果，代码如下：

代码

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)
    }
  }
}