ant-design-vue FormItem name配置

一、准备

1. Ant-design-vue沙盒：在线编辑调试

二、不同Form model，FormItem name字段设置

1. object model FormItem name

<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 8 }"
  >
    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, reactive } from 'vue';
export default defineComponent({
  setup() {
    const formState = reactive({
      username: 'object form item name',
    });

    return {
      formState,
    };
  },
});
</script>

2. array model FormItem name

<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 8 }"
  >
    <a-form-item
      label="水果"
      v-for="(fruit, index) in formState"
      :key="index"
      name="index"
      :rules="[{ required: true, message: 'Please input fruit!' }]"
    >
      <a-input v-model:value="formState[index]" />
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const formState = ref(["apple", "banana", "数组 FormItem name"])
    return {
      formState,
    };
  },
});
</script>

3. array object model FormItem name

<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 8 }"
  >
    <a-form-item
      v-for="(person, index) in formState"
      :key="index"
      label="姓名"
      name="[index, 'name']"
      :rules="[{ required: true, message: 'empty' }]"
    >
      <a-input v-model:value="formState[index].name" />
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const formState = ref([
      {"name": "Tom"}, 
      {"name": "Alice"}, 
    ])
    return {
      formState,
    };
  },
});
</script>

4. object array object model FormItem name

<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 8 }"
  >
    <a-form-item
      v-for="(person, index) in formState.persons"
      :key="index"
      label="姓名"
      :name="['persons', index, 'name']"
      :rules="[{ required: true, message: 'empty', trigger: 'change' }]"
    >
      <!-- <a-input v-model:value="formState.persons[index].name" /> -->
      <a-input v-model:value="person.name" />
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent, reactive } from "vue";

export default defineComponent({
  setup() {
    const formState = reactive({
      persons: [
        {
          name: "Tom",
          age: 18,
        },
        {
          name: "Alice",
          age: 17,
        },
      ],
    });
    return {
      formState,
    };
  },
});
</script>

三、其他

1. Vue3在线编辑器
2. Ant-design-vue文档