---

vue里点击按钮动态生成表单

---

前言

提示：在vue项目里动态生成表单，怎么让生成的控件互不干扰呢？

---

提示：先上整体效果图
图片上前两个有值的是修改功能回显示的，后面才是动态添加的表单，主要利用深拷贝，，深拷贝还有很多方法，比如 https://www.cnblogs.com/sweet-ice/p/10599011.html 除此之外lodash中的深拷贝方法***cloneDeep()***也可以

一、什么是递归？

直接点击链接: link.

二、利用递归实现深拷贝

1.创建一个函数

代码如下（示例）：

  cloneObj(obj) {
      let ret;
      if (Array.isArray(obj)) {
        ret = []  // 如果是一个数组的话
        for (i = 0; i < ret.length; i++) {// 将result赋值为一个数组，并且执行遍历
          ret[i] = this.cloneObj(obj[i])  // 递归克隆数组中的每一项
        }
        return ret;
      } else if (Object.prototype.toString.call(obj) === '[object Object]') {  // 否则是普通对象，直接for in循环，递归赋值对象的所有值
        ret = {}
        for (let i in obj) {
          ret[i] = this.cloneObj(obj[i])
        }
        return ret;
      } else {
        return obj;
      }
    },

2.点击按钮直接将变量传入函数

代码如下（示例）：

 addPdfFile() {
      let arr = this.cloneObj(this.addform)   //此处也可以用json.parse(json.stringfy())实现深拷贝更方便
      this.addTzArr.push(arr)
    },

---

## 2-1代码

代码如下（示例）：

 <!-- 添加的表单 -->
          <div
            class="tdia_box"
            v-for="(item, index) in addTzArr"
            :key="index"
            style="height: 160px"
          >
            <div class="icon_delete" style="text-align: center">
              <i class="el-icon-remove-outline" @click="deletePdfTwo(index)"></i>
            </div>
            <el-form
              :label-position="labelPosition"
              label-width="50px"
              :model="addform"
              :rules="addformRules"
              ref="addform"
              class="formTz"
            >
              <el-form-item label="时间:" prop="monitorTime">
                <el-date-picker
                  v-model="item.monitorTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  @change="addValue1Select(item.monitorTime, index)"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item :label="lablename" prop="monitorValue">
                <el-input
                  type="text"
                  class="iptleft"
                  ref="addref"
                  v-model="item.monitorValue"
                  @change="addIpt(item.monitorValue, index)"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancleTz">取 消</el-button>
          <el-button type="primary" @click="tzsureEditruleForm('tzruleForm','addform')"
            >确 定</el-button
          >
        </div>

---

## 2-2.定义变量

代码如下（示例）：

   // 添加表单的对象
      addform: {
        monitorTime: new Date(),
        monitorValue: ''
      },
      addTzArr: [
        {
            monitorTime: new Date(),//数组里如果为空，则表单从0开始，本例默认有一个对象，则一开始就有一个表单在页面上
            monitorValue: ''
        }
      ],

。

---

**# 总结** 提示：这里对文章进行总结： 例如：以上就是今天要讲的内容，本文仅仅简单记录了在vue里怎么动态生成表单，让那个绑定的元素互不影响