Vue3 TS Element Plus 表单重置：提交后清空内容并恢复初始状态

"<script lang="ts">\nimport { ElMessageBox } from "element-plus";\nimport { ref, defineComponent, reactive } from "vue";\nexport default defineComponent({\n setup() {\n const form = reactive({\n name: '',\n region: '',\n date1: '',\n date2: '',\n delivery: false,\n type: [],\n resource1: '',\n resource2: '',\n resource3: '',\n resource4: '',\n resource5: '',\n resource6: '',\n resource7: '',\n desc: '',\n })\n \n return { form };\n }, methods: {\n onSubmit (row:any) {\n ElMessageBox.confirm('是否确认提交！')\n .then(() => {\n\n // 触发自定义事件\n this.$emit('formSubmitted');\n // 关闭弹出框\n ElMessageBox.close();\n\n // 重置表单内容\n this.form.name = '';\n this.form.region = '';\n this.form.date1 = '';\n this.form.date2 = '';\n this.form.delivery = false;\n this.form.type = [];\n this.form.resource1 = '';\n this.form.resource2 = '';\n this.form.resource3 = '';\n this.form.resource4 = '';\n this.form.resource5 = '';\n this.form.resource6 = '';\n this.form.resource7 = '';\n this.form.desc = '';\n })\n .catch(() => {\n console.log(row,"取消提交")\n })\n },\n }\n});\n"\n在提交表单后的then回调函数中，将表单中的每个属性值都设置为空或默认值，这样就可以将表单内容重置为初始状态。\n\n注意：在Vue 3中，你可以使用ref或reactive来创建响应式对象，但在你的代码中，已经使用了reactive，所以在重置表单时直接修改form对象的属性即可。