实现表单的动态添加更多

如果要实现如下图继续添加更多的表单的功能

• 第一当前两项需要用一个template来包裹，然后v-for循环。
• 直接来代码

<el-form>
    <div class="flexBox" v-for="(item, index) in curNum">
          <div class="formItem">
            <label><span>模板详情表ID</span> </label>
            <el-form-item>
              <el-input
                v-model="list[index].templateDetailsId"
                placeholder="请输入模板详情表ID"
              ></el-input>
            </el-form-item>
          </div>
          <div class="formItem">
            <label><span>指标值</span> </label>
            <el-form-item>
              <el-input
                v-model="list[index].indexValue"
                placeholder="请输入指标值"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="flexBox">
          <button class="add copyBtn" type="button" @click="addMore">
            <span>继续添加更多指标</span>
          </button>
        </div>
</el-form>

• 在这里循环这个div.flexBox的类，curNum代表的是循环几次，也就是新增几列。
• 例如当此两个form-item的form为

interface FormItem {
  templateDetailsId: string;
  indexValue: string;
}
const list = ref<Array<FormItem>>([
  {
    templateDetailsId: '', //模板详情表ID
    indexValue: '', //指标值
  },
]); //.

• 此时，只需要每次点击 继续添加更多指标 让 curNum+1 并且push进去这个对象，就可以实现了
• 如下代码

//继续增加
function addMore() {
  list.value.push({
    templateDetailsId: '', //模板详情表ID
    indexValue: '', //指标值
  });
  curNum.value++;
}