antdv中 一个页面使用两个form
时间: 2024-06-11 21:05:21 浏览: 11
在antdv中,一个页面使用两个form非常简单。可以使用antdv提供的`Form`组件,在页面中渲染多个`Form`组件。
例如:
```vue
<template>
<div>
<h2>Form 1</h2>
<a-form :form="form1" @submit="handleSubmit1">
<!-- form1的表单元素 -->
</a-form>
<h2>Form 2</h2>
<a-form :form="form2" @submit="handleSubmit2">
<!-- form2的表单元素 -->
</a-form>
</div>
</template>
<script>
import { Form } from 'ant-design-vue';
export default {
components: {
'a-form': Form
},
data() {
return {
form1: null,
form2: null
};
},
mounted() {
this.form1 = this.$form.createForm(this);
this.form2 = this.$form.createForm(this);
},
methods: {
handleSubmit1(e) {
e.preventDefault();
this.form1.validateFields((err, values) => {
if (!err) {
console.log('form1 submitted:', values);
}
});
},
handleSubmit2(e) {
e.preventDefault();
this.form2.validateFields((err, values) => {
if (!err) {
console.log('form2 submitted:', values);
}
});
}
}
}
</script>
```
在上面的例子中,我们使用了两个`<a-form>`标签,分别表示两个不同的表单。在`mounted`生命周期钩子中,我们创建了两个`form`对象并分别赋值给`form1`和`form2`属性。在表单提交时,我们分别调用了不同的`validateFields`方法,验证表单数据并提交。