Vue3+TypeScript+Element Plus 表单重置: 如何在提交后清空表单内容

在提交表单之后，可以通过重置表单的方式来清空之前填写的内容。具体的实现方式可以参考以下步骤：\n\n1. 在PushPlanView.vue组件中，添加一个方法来重置表单的内容，例如resetForm方法。\n\ntypescript\n// PushPlanView.vue\nexport default {\n // ...\n methods: {\n resetForm() {\n // 重置表单的内容\n // 例如通过重置表单的数据绑定来清空表单字段的值\n this.formField1 = '';\n this.formField2 = '';\n // ...\n },\n // ...\n },\n}\n\n\n2. 在父组件中，通过监听表单提交的事件formSubmitted，在事件处理函数中调用子组件的resetForm方法。\n\nvue\n<template>\n <el-dialog v-model="add" title="推送计划" width="95%" height="100%">\n <PushPlanView :value="parentValue" @formSubmitted="handleFormSubmitted"></PushPlanView>\n </el-dialog>\n</template>\n\n<script>\nimport PushPlanView from './PushPlanView.vue';\n\nexport default {\n components: {\n PushPlanView,\n },\n methods: {\n handleFormSubmitted() {\n // 提交表单后的处理逻辑\n // ...\n \n // 调用子组件的 resetForm 方法重置表单内容\n this.$refs.pushPlanView.resetForm();\n },\n },\n}\n</script>\n\n\n这样，当表单提交后，父组件会调用子组件的resetForm方法，从而重置表单的内容。