VUE3+ Ant-Design-vue的form表单有分类名称input框,关键词input,描述信息input,有两个按钮分别是返回,保存。点击保存时拿着填写的内容跳转添加到表格
时间: 2024-03-13 12:43:54 浏览: 126
好的,您的问题是如何使用VUE3+ Ant-Design-vue实现一个带有分类名称input框、关键词input、描述信息input的表单,以及两个按钮分别是返回和保存,并且在保存按钮被点击时将填写的内容添加到表格中。
首先,您需要在Vue3中使用Ant-Design-vue组件库来创建您的表单。可以使用Form组件来创建表单,并使用FormItem组件来添加表单项。为了实现分类名称input框、关键词input、描述信息input,您可以使用Input组件或者TextArea组件来创建相应的输入框。
接下来,您需要添加两个按钮。可以使用Button组件来创建按钮,并将它们放置在表单的底部。一个按钮用于返回,另一个按钮用于保存。在点击保存按钮时,您需要使用表单的onSubmit事件来提交表单数据,同时将填写内容添加到表格中。
下面是一个简单的示例代码,供您参考:
```
<template>
<a-form @submit="handleSubmit">
<a-form-item label="分类名称">
<a-input v-model="categoryName"></a-input>
</a-form-item>
<a-form-item label="关键词">
<a-input v-model="keywords"></a-input>
</a-form-item>
<a-form-item label="描述信息">
<a-textarea v-model="description"></a-textarea>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">保存</a-button>
<a-button type="default" @click="handleCancel">返回</a-button>
</a-form-item>
</a-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const categoryName = ref('')
const keywords = ref('')
const description = ref('')
const handleSubmit = () => {
// 将表单数据提交到后端
// 将填写内容添加到表格中
}
const handleCancel = () => {
// 返回上一页或者重置表单数据
}
return {
categoryName,
keywords,
description,
handleSubmit,
handleCancel
}
}
}
</script>
```
阅读全文