如图
<template>
<div>
<a-form
ref="formRef"
:model="formEssay"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item label="标题" name="title">
<a-input v-model:value="formEssay.title" />
</a-form-item>
<a-form-item label="分类" :name="['sub', 'category']">
<a-input v-model:value="formEssay.sub.category" />
</a-form-item>
<a-form-item label="内容" :name="['sub', 'content']">
<a-input v-model:value="formEssay.sub.content" />
</a-form-item>
<a-form-item label="分类" :name="['sub', 'title']">
<mavon-editor v-model:value="formEssay.sub.title"/>
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">Create</a-button>
<a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
import { defineComponent, reactive, ref, toRaw } from 'vue';
export default defineComponent({
setup() {
const formRef = ref();
const formEssay = reactive({
title: undefined,
sub: {
category: '',
content: '',
title: undefined
}
});
const onSubmit = () => {
formRef.value
.validate()
.then(() => {
console.log('values', formEssay, toRaw(formEssay));
})
.catch(error => {
console.log('error', error);
});
};
const resetForm = () => {
formRef.value.resetFields();
};
return {
formRef,
labelCol: {
span: 4
},
wrapperCol: {
span: 14
},
formEssay,
onSubmit,
resetForm
};
}
});
</script>