<a-form :form="formRef" layout="vertical" @submit="handleSubmit" scrollToFirstError> <template #fields>
项目 {{ index + 1 }}
<a-icon
type="close-circle"
class="remove-btn"
@click="removeItem(index)"
v-if="(formRef.getFieldValue('items') || []).length > 1"
/>
<a-form-item
:name="['items', index, 'name']"
:rules="[
{ required: true, message: '请输入名称' },
{ whitespace: true, message: '名称不能为空' }
]"
label="名称">
<a-input placeholder="请输入名称" />
</a-form-item>
<a-form-item
:name="['items', index, 'desc']"
:rules="[
{ required: true, message: '请输入描述' },
{ whitespace: true, message: '描述不能为空' }
]"
label="描述">
<a-textarea rows="3" placeholder="请输入描述" />
</a-form-item>
</div>
</template>
<!-- 添加按钮 -->
<a-form-item>
<a-button
type="dashed"
class="w-full add-btn"
@click="addItem"
icon="plus">
添加项目
</a-button>
</a-form-item>
<!-- 提交按钮 -->
<a-form-item>
<a-button type="primary" html-type="submit">
提交表单
</a-button>
</a-form-item>
</a-form>
const formRef = ref(null)
// 提交结果
const submitResult = ref(null)
// 初始化表单
const initForm = () => {
// 设置初始值,包含一个空对象
formRef.value.setFieldsValue({
items: [{ name: '', desc: '' }]
})
}
const addItem = () => {
const items = formRef.value.getFieldValue('items') || []
formRef.value.setFieldsValue({
items: [...items, { name: '', desc: '' }]
})
}
const removeItem = (index) => {
const items = formRef.value.getFieldValue('items') || []
if (items.length > 1) {
items.splice(index, 1)
formRef.value.setFieldsValue({ items })
} else {
message.warning('至少保留一个项目')
}
}
const handleSubmit = (e) => { e.preventDefault() formRef.value.validateFields().then(values => { // 过滤掉空项 const validItems = values.items.filter(item => item.name.trim() && item.desc.trim()) submitResult.value = { items: validItems } message.success('表单提交成功') }).catch(errorInfo => { console.log('验证失败:', errorInfo) message.error('请检查并填写所有必填字段') }) }