Vue3+Element+Ts implements basic search reset and other functions of the form

After switching from Vue2's writing style to Vue3's format, there will be some changes in writing style and code structure. Here are some key points.

insert image description here

Code structure:

Writing method 1 (recommended):

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { ElForm } from 'element-plus'
const myform = ref<InstanceType<typeof ElForm>>()
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()
}
</script>

<template>
  <div class="mysearch">
    <el-form :model="formData" label-width="80px" ref="myform">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="Name" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Subject" prop="subject">
            <el-input v-model="formData.subject"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Grade" prop="grade">
            <el-select v-model="formData.grade" placeholder="Please select">
              <el-option label="Grade 1" value="shanghai"></el-option>
              <el-option label="Grade 2" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="19">
          <el-button type="primary" size="medium" @click="submitForm">
            Query</el-button>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button type="primary" size="medium" @click="submitReset">
            Reset</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<style scoped lang="less">
.mysearch {
  padding: 20px;
}
</style>

Writing method 2:

<template>
  <div class="mysearch">
    <el-form ref="myform" :model="formData" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="Name" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Subject" prop="subject">
            <el-input v-model="formData.subject"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Grade" prop="grade">
            <el-select v-model="formData.grade" placeholder="Please select">
              <el-option label="Grade 1" value="shanghai"></el-option>
              <el-option label="Grade 2" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="19">
          <el-button type="primary" size="medium" @click="submitForm"
            >Query</el-button
          >
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button type="primary" size="medium" @click="submitReset"
            >Reset</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { ElForm } from 'element-plus'

export default defineComponent({
  setup() {
    const formData = reactive({
      name: '',
      subject: '',
      grade: ''
    })
    const myform = ref<InstanceType<typeof ElForm>>()
    // Find const submitForm = () => {
      const { name, subject, grade } = formData
      console.log(name, subject, grade)
    }
    // Reset const submitReset = () => {
      myform.value?.resetFields()
    }
    return {
      formData,
      myform,
      submitForm,
      submitReset
    }
  }
})
</script>

<style scoped lang="less">
.mysearch {
  padding: 20px;
}
</style>

the difference:

Writing method 1, from top to bottom, is JS, HTML, and CSS, which is similar to React and has clear logic.
Writing method 1 is from top to bottom, which is HTML, JS, and CSS, similar to the previous Vue2 writing method.
The format of writing method 1 does not need to export data, methods and other contents, saving the amount of code

Key points:

1. There is no prop in the code of Element Plus's official website Demo

  <el-form-item label="Activity name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

In order to achieve data responsiveness, you need to bind it yourself when writing
2. Using el-form's ref requires introducing ElForm

import { ElForm } from 'element-plus'
const myform = ref<InstanceType<typeof ElForm>>()

This is the end of this article about Vue3+Element+Ts to implement basic form search reset and other functions. For more related Element Ts form search reset content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Two ways to introduce Element-plus UI styles in Vue3.0
Vue elementUI form nested table and verification of each row detailed explanation
vue3 + elementPlus reset form problem

<<: Float and Clear Float in Overview Page

>>: How to disable the automatic password saving prompt function of Chrome browser