您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“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等内容进行导出,节省了代码量
1、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如何实现表单的基础搜索重置等功能”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。