How to realize the functions such as basic search reset of form by Vue3+Element+Ts

This article mainly explains "Vue3+Element+Ts how to achieve the basic search reset and other functions of the form", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Vue3+Element+Ts how to achieve the form of the basic search reset and other functions"!

Code structure:

Write method 1 (recommended):

Import {ref, reactive} from 'vue'import type {ElForm} from' element-plus'const myform = ref () const formData = reactive ({name:', subject:', grade:'}) / / find const submitForm = () = > {const {name, subject, grade} = formData console.log (name, subject Grade)} / / reset const submitReset = () = > {myform.value?.resetFields ()} Check for reset .mysearch {padding: 20px }

Writing method 2:

Check for reset import {defineComponent, reactive, ref} from 'vue'import {ElForm} from' element-plus'export default defineComponent ({setup () {const formData = reactive ({name:', subject:', grade:'}) const myform = ref () / / find const submitForm = () = > {const {name Subject, grade} = formData console.log (name, subject, grade)} / / reset const submitReset = () = > {myform.value?.resetFields ()} return {formData, myform, submitForm, submitReset}}) .mysearch {padding: 20px } difference:

The first method of writing is from top to bottom, which is JS, HTML and Css, which is similar to React, and the logic is clear.

The first method of writing is from top to bottom, which is HTML, JS and Css, similar to the previous Vue2.

The format of method 1 does not need to export data,methods and other contents, which saves the amount of code.

Key points:

1. Prop is not written in the code of Element Plus's official website Demo.

In order to achieve responsive data, you need to bind it yourself when you write.

2. Ref using el-form needs to introduce ElForm

Import {ElForm} from 'element-plus'const myform = ref () so far, I believe you have a deeper understanding of "how to achieve the basic search reset function of the form". You might as well do it in practice! here is the website, more related content can enter the relevant channels to query, follow us, continue to learn!