element-ui 动态增加表单

要动态增加表单，需要使用 Element UI 的表单组件和自定义指令 v-for。具体步骤如下：

1. 在表单中添加一个“增加”按钮，用于动态添加表单项。
2. 在数据中定义一个数组，用于存储表单项的数据。
3. 在 v-for 指令中循环渲染表单项，并绑定表单项的数据。
4. 点击“增加”按钮时，向表单项数据数组中添加一条数据。
5. 表单项数据数组的长度发生变化时，v-for 指令会自动更新渲染表单项。

以下是一个简单的示例代码：

<template>
  <el-form ref="form" :model="formData" label-width="100px">
    <el-form-item v-for="(item, index) in formList" :key="index" :label="'表单项 ' + (index + 1)">
      <el-input v-model="item.value"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addItem">增加表单项</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      formList: [{ value: '' }] // 表单项数据数组，初始有一条数据
    }
  },
  methods: {
    addItem() {
      this.formList.push({ value: '' }) // 添加一条数据
    }
  }
}
</script>

在上面的示例中，我们通过 v-for 指令循环渲染表单项，并通过 addItem 方法向表单项数据数组中添加一条数据。这样，就可以动态增加表单项了。