Vue3+Element+Ts如何实现表单的基础搜索重置等功能

本篇内容主要讲解“Vue3+Element+Ts如何实现表单的基础搜索重置等功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue3+Element+Ts如何实现表单的基础搜索重置等功能”吧!

代码结构：

写法一(推荐)：

<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: ''})// 查找const submitForm = () => {  const { name, subject, grade } = formData  console.log(name, subject, grade)}// 重置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="名称" prop="name">            <el-input v-model="formData.name"></el-input>          </el-form-item>        </el-col>        <el-col :span="8">          <el-form-item label="学科" prop="subject">            <el-input v-model="formData.subject"></el-input>          </el-form-item>        </el-col>        <el-col :span="8">          <el-form-item label="年级" prop="grade">            <el-select v-model="formData.grade" placeholder="请选择">              <el-option label="一年级" value="shanghai"></el-option>              <el-option label="二年级" 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">            查 询          </el-button>        </el-col>        <el-col :span="2" :offset="0">          <el-button type="primary" size="medium" @click="submitReset">            重 置          </el-button>        </el-col>      </el-row>    </el-form>  </div></template><style scoped lang="less">.mysearch {  padding: 20px;}</style>

写法二：

<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="名称" prop="name">            <el-input v-model="formData.name"></el-input>          </el-form-item>        </el-col>        <el-col :span="8">          <el-form-item label="学科" prop="subject">            <el-input v-model="formData.subject"></el-input>          </el-form-item>        </el-col>        <el-col :span="8">          <el-form-item label="年级" prop="grade">            <el-select v-model="formData.grade" placeholder="请选择">              <el-option label="一年级" value="shanghai"></el-option>              <el-option label="二年级" 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"            >查 询</el-button          >        </el-col>        <el-col :span="2" :offset="0">          <el-button type="primary" size="medium" @click="submitReset"            >重 置</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>>()    // 查找    const submitForm = () => {      const { name, subject, grade } = formData      console.log(name, subject, grade)    }    // 重置    const submitReset = () => {      myform.value?.resetFields()    }    return {      formData,      myform,      submitForm,      submitReset    }  }})</script><style scoped lang="less">.mysearch {  padding: 20px;}</style>

区别：

• 写法一由上到下，分别是JS、HTML、Css，类似于React的写法，逻辑也清晰

• 写法一由上到下，分别是HTML、JS、Css，和之前的Vue2写法类似

• 写法一的格式不需要将data,methods等内容进行导出，节省了代码量

重点：

Element Plus的官网Demo的代码里面没有写prop

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

为了实现数据的响应式，在写的时候需要自己绑定
2、使用el-form的ref需要引入ElForm

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

到此，相信大家对“Vue3+Element+Ts如何实现表单的基础搜索重置等功能”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！