动态生成表单(初版）

<template>
  <div class="dynamic" style="margin-top: 50px">
    <div class="left">
      <el-form :model="dynamicForm" label-width="120px">
        <el-form-item label="表单类型">
          <el-radio-group v-model="dynamicForm.formType">
            <el-radio :label="1">正常的input框</el-radio>
            <el-radio :label="2">单选radio</el-radio>
            <el-radio :label="3">多选check</el-radio>
            <el-radio :label="4">文件类型</el-radio>
            <el-radio :label="5">textarea类型</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="key" v-if="dynamicForm.formType != 4">
          <el-input v-model="dynamicForm.key" />
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="dynamicForm.name" />
        </el-form-item>
        <!-- 单选按钮 -->
        <div v-if="dynamicForm.formType == 2">
          <div v-for="(item, index) in dynamicForm.radioArr" :key="index">
            <el-form-item>
              <span slot="label">{{ "单选选项key" + (index + 1) }}</span>
              <el-input v-model="dynamicForm.radioArr[index].key">
                <el-button
                  v-if="index == 0"
                  slot="append"
                  icon="el-icon-plus"
                  @click.native="addRadioItem('radio')"
                ></el-button>
                <el-button
                  v-if="index != 0 && index != 1"
                  slot="append"
                  icon="el-icon-minus"
                  @click.native="removeRadioItem(index, 'radio')"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item>
              <span slot="label">{{ "单选选项value" + (index + 1) }}</span>
              <el-input v-model="dynamicForm.radioArr[index].value" />
            </el-form-item>
          </div>
        </div>
        <!-- 复选框 -->
        <div v-if="dynamicForm.formType == 3">
          <div
            v-for="(checkItme, checkIndex) in dynamicForm.checkedArr"
            :key="checkIndex"
          >
            <el-form-item>
              <span slot="label">{{ "复选框选项key" + (checkIndex + 1) }}</span>
              <el-input v-model="dynamicForm.checkedArr[checkIndex].label">
                <el-button
                  v-if="checkIndex == 0"
                  slot="append"
                  icon="el-icon-plus"
                  @click.native="addRadioItem('checked')"
                ></el-button>
                <el-button
                  v-if="checkIndex != 0 && checkIndex != 1"
                  slot="append"
                  icon="el-icon-minus"
                  @click.native="removeRadioItem(checkIndex, 'checked')"
                ></el-button>
              </el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-button type="primary" @click="confirmBtn">确认添加</el-button>
    </div>
    <div class="right">
      <el-form :model="toForm" label-width="120px">
        <el-form-item
          v-for="(formItem, formIndex) in toItemArr"
          :key="formIndex"
          :label="formItem.name"
          :prop="formItem.key"
        >
          <el-input
            v-model="toForm[formItem.key]"
            v-if="formItem.formType == 1"
          />
          <el-radio-group
            v-model="toForm[formItem.key]"
            v-if="formItem.formType == 2"
          >
            <el-radio
              v-for="(radioItem, radioIndex) in formItem.radioArr"
              :key="radioIndex"
              :label="radioItem.key"
              >{{ radioItem.value }}</el-radio
            >
          </el-radio-group>
          <el-checkbox-group
            v-model="toForm[formItem.key]"
            v-if="formItem.formType == 3"
          >
            <el-checkbox
              v-for="(checkItem, checkIndex) in formItem.checkedArr"
              :key="checkIndex"
              :label="checkItem.label"
            ></el-checkbox>
          </el-checkbox-group>
          <el-upload
            v-if="formItem.formType == 4"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-input
            type="textarea"
            v-model="toForm[formItem.key]"
            v-if="formItem.formType == 5"
          />
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="submitServe"
        v-if="JSON.stringify(toForm) != '{}'"
        >提交到服务器</el-button
      >
    </div>
  </div>
</template>  

<script>
export default {
  data() {
    return {
      toForm: {},
      toItemArr: [],
      dynamicForm: {
        formType: 1, //表单类型     1代表正常的input 2代表单选按钮 3代表check复选框 4代表文件类型 5代表textarea类型
        key: "", //表单中的每一项绑定的值（prop）
        name: "", //表单中每一项的label
        radioArr: [
          { key: "", value: "" },
          { key: "", value: "" },
        ],
        checkedArr: [{ label: "" }, { label: "" }],
      },
    };
  },
  methods: {
    //上传文件超出规定大小回调函数
    handleExceed(){

    },
    //提交到服务器按钮
    submitServe() {
      console.log(this.toForm);
    },
    //确认按钮
    confirmBtn() {
      if(this.dynamicForm.formType==3){
          // this.toForm[this.dynamicForm.key] = [];  注释掉的这部分有问题需要用$set的方式动态添加属性
          this.$set(this.toForm,this.dynamicForm.key,[])
        }else {
          this.$set(this.toForm,this.dynamicForm.key,'')
        }
      this.toItemArr.push(this.dynamicForm);
      this.dynamicForm = {
        formType: 1, //表单类型     1代表正常的input 2代表单选按钮 3代表check复选框 4代表文件类型 5代表textarea类型
        key: "", //表单中的每一项绑定的值（prop）
        name: "", //表单中每一项的label
        radioArr: [
          { key: "", value: "" },
          { key: "", value: "" },
        ],
        checkedArr: [{ label: "" }, { label: "" }],
      };
    },
    //添加radio的一项方法
    addRadioItem(type) {
      if (type == "radio") {
        this.dynamicForm.radioArr.push({ key: "", value: "" });
      } else if (type == "checked") {
        this.dynamicForm.checkedArr.push({ label: "" });
      }
    },
    //删除radio其中一项的方法
    removeRadioItem(index, type) {
      if (type == "radio") {
        this.dynamicForm.radioArr.splice(index, 1);
      } else if (type == "checked") {
        this.dynamicForm.checkedArr.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  float: left;
}
.right {
  float: right;
  margin-left: 200px;
  margin-top: 9px;
}
</style>