vue篇 - 基于element-ui实现点击按钮自定义创建表单内容

html片段

<template>
  <div class="app-container">
    <div class="tranferbox">
      <el-form ref="form" :model="formData" label-width="90px">
        <el-form-item label="表单设置">
          <el-button @click="addEnvironmentForms('text')">单行文本</el-button>
          <el-button @click="addEnvironmentForms('textarea')">多行文本</el-button>
          <el-button @click="addEnvironmentForms('number')">数字</el-button>
          <el-button @click="addEnvironmentForms('radio')">单选框</el-button>
          <el-button @click="addEnvironmentForms('checkbox')">复选框</el-button>
          <el-button @click="addEnvironmentForms('select')">下拉菜单</el-button>
          <el-button @click="addEnvironmentForms('time')">日期</el-button>
          <el-button @click="addEnvironmentForms('timedate')">日期区间</el-button>
          <el-button @click="addEnvironmentForms('file')">附件</el-button>
          <el-row class="form-row" :gutter="24" v-for="(item, index) in formData.forms" :key="item.key"