循环添加el-form表单，并加校验； 循环a-form表单

<template>
  <div>
    <el-form
      :model="formData"
      :inline="true"
      ref="formData"
      label-width="65px"
      size="medium"
    >
      <el-row
        v-for="(item, index) in formData.loopFormList"
        :key="item.key"
        style="border-bottom: 1px solid #f0f0f0; padding: 10px"
      >
        <el-form-item
          label="参数名"
          :prop="'loopFormList.' + index + '.fieldName'"
          :rules="[
            { required: true, message: '参数名不能为空', trigger: 'change' },
          ]"
        >
          <el-input
            v-model="item.fieldName"
            size="mini"
            placeholder="请输入参数名"
          />
        </el-form-item>
        <el-form-item
          label="描述"
          :prop="'loopFormList.' + index + '.fieldDesc'"
          :rules="[
            { required: true, message: '描述不能为空', trigger: 'change' },
          ]"
        >
          <el-select
            v-model="item.fieldDesc"
            placeholder="请选择描述"
            size="mini"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            v-if="formData.loopFormList.length > 1"
            size="mini"
            @click="removeRow(index)"
          >
            删除
          </el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-button
          type="success"
          icon="el-icon-plus"
          size="mini"
          @click="addRow"
        >
          添加
        </el-button>
        <el-button type="primary" size="mini" @click="submit('formData')">
          提交
        </el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      formData: {
        loopFormList: [
          {
            fieldName: "",
            fieldDesc: "",
          },
        ],
      },
    };
  },
  methods: {
    addRow() {
      this.formData.loopFormList.push({
        fieldName: "",
        fieldDesc: "",
      });
    },
    // 删除属性列
    removeRow(index) {
      this.formData.loopFormList.splice(index, 1);
    },
    // 提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          console.log("this.formData", this.formData.loopFormList);
          this.formData.loopFormList.forEach((item, index) => {
            console.log("item", item, "index", index);
            console.log(item.fieldDesc.label);
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style></style>

<template>
  <a-form
    ref="formRef"
    name="dynamic_form_nest_item"
    :model="formState"
  >
    <a-space
      v-for="(item, index) in formState.users"
      :key="item.id"
      style="display: flex; margin-bottom: 8px"
      align="baseline"
    >
      <a-form-item
        :name="['users', index, 'first']"
      >
        <a-input v-model:value="item.first" placeholder="First Name" />
      </a-form-item>
      <a-form-item
        :name="['users', index, 'last']"
      >
        <a-select v-model:value="item.last">
          <a-select-option :value="0">打开</a-select-option>
          <a-select-option :value="1">关闭</a-select-option>
        </a-select>
      </a-form-item>

      <MinusCircleOutlined @click="removeUser(item)" />
    </a-space>
    <a-form-item>
      <a-button type="dashed" block @click="addUser">
        <PlusOutlined />
        Add user
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, ref } from 'vue';
import type { FormInstance } from 'ant-design-vue';

interface User {
  first: string;
  last: string;
  id: number;
}
export default defineComponent({
  components: {
    MinusCircleOutlined,
    PlusOutlined,
  },
  setup() {
    const formRef = ref<FormInstance>();
    const formState = reactive<{ users: User[] }>({
      users: [],
    });
    const removeUser = (item: User) => {
      let index = formState.users.indexOf(item);
      if (index !== -1) {
        formState.users.splice(index, 1);
      }
    };
    const addUser = () => {
      formState.users.push({
        first: '',
        last: '',
        id: Date.now(),
      });
    };
    return {
      formRef,
      formState,
      removeUser,
      addUser,
    };
  },
});
</script>