ant design vue 嵌套表单 具体代码怎么写
时间: 2023-10-24 19:05:25 浏览: 80
Ant Design Vue 提供了 `<a-form-model>` 组件用于创建表单,可以通过嵌套表单来实现更复杂的数据录入场景。下面是一个示例代码,演示了如何使用 Ant Design Vue 的嵌套表单。
```html
<template>
<a-form-model :form="form" @submit="handleSubmit">
<a-form-model-item label="姓名" :rules="[ { required: true, message: '请输入姓名' } ]">
<a-input v-model="form.name" />
</a-form-model-item>
<a-form-model-item label="年龄" :rules="[ { required: true, message: '请输入年龄' } ]">
<a-input-number v-model="form.age" />
</a-form-model-item>
<a-form-model-item label="联系方式">
<a-form-model :form="form.contact">
<a-form-model-item label="电话" :rules="[ { required: true, message: '请输入电话' } ]">
<a-input v-model="form.contact.phone" />
</a-form-model-item>
<a-form-model-item label="邮箱" :rules="[ { required: true, message: '请输入邮箱' } ]">
<a-input v-model="form.contact.email" />
</a-form-model-item>
</a-form-model>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary" html-type="submit">提交</a-button>
</a-form-model-item>
</a-form-model>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
contact: {
phone: '',
email: ''
}
}
}
},
methods: {
handleSubmit() {
this.$message.success('提交成功')
}
}
}
</script>
```
在上述示例代码中,通过在 `<a-form-model>` 组件的子组件中嵌套另一个 `<a-form-model>` 组件,实现了联系方式的嵌套表单。在子组件的 `v-model` 绑定中,通过 `form.contact.phone` 和 `form.contact.email` 来指定联系方式中电话和邮箱的数据绑定。通过这种方式,我们可以实现更复杂的表单数据录入场景。
阅读全文