iview Form表单实现动态新增

<template>
  <div>
    <Button type="primary" @click="addField">新增</Button>
    <Form
      ref="formInline"
      :label-width="130"
      :model="formInline"
      :rules="ruleInline"
      label-position="left"
    >
      <Row>
        <Col span="24">
          <FormItem label="服务器编号" prop="serverNo">
            <Input
              v-model="formInline.serverNo"
              clearable
              style="width: 200px"
              maxlength="20"
            ></Input>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="服务器品牌" prop="serverBrand">
            <Input
              v-model="formInline.serverBrand"
              clearable
              style="width: 200px"
              maxlength="40"
            ></Input>
          </FormItem>
        </Col>
        <Col
          span="24"
          v-for="(item, index) in formInline.forensicsParts"
          :key="index"
        >
          <FormItem
            :label="item.name"
            :prop="'forensicsParts.' + index + '.value'"
            :rules="{
              required: true,
              message: '请填写' + item.name,
              trigger: 'blur',
            }"
          >
            <Input style="width: 200px" :maxlength="40" v-model="item.value" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Button @click="yjxxqx">取消</Button>
        <Button type="primary" @click="yjxxbtn" style="margin-left: 50px"
          >保存</Button
        >
      </Row>
    </Form>
    <Modal
      v-model="isShowAddField"
      :loading="loadingModal"
      @on-ok="modalOk"
      :closeCallBack="printCancel"
      width="250"
      title="新增字段"
    >
      <Form
        ref="formInlineField"
        :label-width="10"
        :model="formInlineField"
        :rules="ruleInlineField"
        label-position="left"
      >
        <FormItem prop="moduleName">
          <Input
            v-model="formInlineField.moduleName"
            style="width: 200px"
            maxlength="20"
          ></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        serverBrand: "",
        serverNo: "",
        forensicsParts: [], // 新增的维护字段
      },
      ruleInline: {
        serverBrand: [
          {
            required: true,
            message: "请填写服务器编号",
            trigger: "blur",
          },
        ],
        serverNo: [
          {
            required: true,
            message: "请填写服务器品牌",
            trigger: "blur",
          },
        ],
      },
      loadingModal: true,
      isShowAddField: false,
      formInlineField: {
        moduleName: "",
        value: "",
      },
      ruleInlineField: {
        moduleName: [
          {
            required: true,
            message: "请填写维护内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    addField() {
      this.isShowAddField = true;
    },
    modalOk() {
      this.$refs.formInlineField.validate((valid) => {
        if (valid) {
          this.formInline.forensicsParts.push({
            name: this.formInlineField.moduleName,
            value: "",
          });

          this.printCancel();
        } else {
          this.loadingModal = false;
          this.$nextTick(() => {
            this.loadingModal = true;
          });
        }
      });
    },
    printCancel() {
      this.isShowAddField = false;
      this.formInlineField.moduleName = "";
      this.$refs.formInlineField.resetFields();
    },
    yjxxqx() {
      this.$refs.formInline.resetFields();
    },
    yjxxbtn() {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          console.log("成功");
        }
      });
    },
  },
};
</script>

效果图如下
默认有两个input框
点击新增后在model框输入字段名字后效果如下