脚本宝典收集整理的这篇文章主要介绍了Vue3+Element+Ts实现表单的基础搜索重置等功能,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
从Vue2的写法转变为Vue3的格式之后,会有一些写法和代码结构的改变,这里对一些重点进行介绍。
写法一(推荐):
<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>
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实现表单的基础搜索重置等功能的文章就介绍到这了,更多相关Element Ts表单搜索重置内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的Vue3+Element+Ts实现表单的基础搜索重置等功能全部内容,希望文章能够帮你解决Vue3+Element+Ts实现表单的基础搜索重置等功能所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。