耀极客论坛

 找回密码
 立即注册
查看: 727|回复: 0

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

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-9 00:12:27 | 显示全部楼层 |阅读模式
  本文主要介绍了Vue3+Element+Ts实现表单的基础搜索重置等功能,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  1. 从Vue2的写法转变为Vue3的格式之后,会有一些写法和代码结构的改变,这里对一些重点进行介绍。
复制代码

代码结构:
  写法一(推荐):
  1. ‹script setup lang="ts">
  2. import { ref, reactive } from 'vue'
  3. import type { ElForm } from 'element-plus'
  4. const myform = ref‹InstanceType‹typeof ElForm>>()
  5. const formData = reactive({
  6.   name: '',
  7.   subject: '',
  8.   grade: ''
  9. })
  10. // 查找
  11. const submitForm = () => {
  12.   const { name, subject, grade } = formData
  13.   console.log(name, subject, grade)
  14. }
  15. // 重置
  16. const submitReset = () => {
  17.   myform.value?.resetFields()
  18. }
  19. ‹/script>
  20. ‹template>
  21.   ‹div class="mysearch">
  22.     ‹el-form :model="formData" label-width="80px" ref="myform">
  23.       ‹el-row :gutter="24">
  24.         ‹el-col :span="8">
  25.           ‹el-form-item label="名称" prop="name">
  26.             ‹el-input v-model="formData.name">‹/el-input>
  27.           ‹/el-form-item>
  28.         ‹/el-col>
  29.         ‹el-col :span="8">
  30.           ‹el-form-item label="学科" prop="subject">
  31.             ‹el-input v-model="formData.subject">‹/el-input>
  32.           ‹/el-form-item>
  33.         ‹/el-col>
  34.         ‹el-col :span="8">
  35.           ‹el-form-item label="年级" prop="grade">
  36.             ‹el-select v-model="formData.grade" placeholder="请选择">
  37.               ‹el-option label="一年级" value="shanghai">‹/el-option>
  38.               ‹el-option label="二年级" value="beijing">‹/el-option>
  39.             ‹/el-select>
  40.           ‹/el-form-item>
  41.         ‹/el-col>
  42.       ‹/el-row>
  43.       ‹el-row :gutter="20">
  44.         ‹el-col :span="2" :offset="19">
  45.           ‹el-button type="primary" size="medium" @click="submitForm">
  46.             查 询
  47.           ‹/el-button>
  48.         ‹/el-col>
  49.         ‹el-col :span="2" :offset="0">
  50.           ‹el-button type="primary" size="medium" @click="submitReset">
  51.             重 置
  52.           ‹/el-button>
  53.         ‹/el-col>
  54.       ‹/el-row>
  55.     ‹/el-form>
  56.   ‹/div>
  57. ‹/template>
  58. ‹style scoped lang="less">
  59. .mysearch {
  60.   padding: 20px;
  61. }
  62. ‹/style>
复制代码
  写法二:
  1. ‹template>
  2.   ‹div class="mysearch">
  3.     ‹el-form ref="myform" :model="formData" label-width="80px">
  4.       ‹el-row :gutter="24">
  5.         ‹el-col :span="8">
  6.           ‹el-form-item label="名称" prop="name">
  7.             ‹el-input v-model="formData.name">‹/el-input>
  8.           ‹/el-form-item>
  9.         ‹/el-col>
  10.         ‹el-col :span="8">
  11.           ‹el-form-item label="学科" prop="subject">
  12.             ‹el-input v-model="formData.subject">‹/el-input>
  13.           ‹/el-form-item>
  14.         ‹/el-col>
  15.         ‹el-col :span="8">
  16.           ‹el-form-item label="年级" prop="grade">
  17.             ‹el-select v-model="formData.grade" placeholder="请选择">
  18.               ‹el-option label="一年级" value="shanghai">‹/el-option>
  19.               ‹el-option label="二年级" value="beijing">‹/el-option>
  20.             ‹/el-select>
  21.           ‹/el-form-item>
  22.         ‹/el-col>
  23.       ‹/el-row>
  24.       ‹el-row :gutter="20">
  25.         ‹el-col :span="2" :offset="19">
  26.           ‹el-button type="primary" size="medium" @click="submitForm"
  27.             >查 询‹/el-button
  28.           >
  29.         ‹/el-col>
  30.         ‹el-col :span="2" :offset="0">
  31.           ‹el-button type="primary" size="medium" @click="submitReset"
  32.             >重 置‹/el-button
  33.           >
  34.         ‹/el-col>
  35.       ‹/el-row>
  36.     ‹/el-form>
  37.   ‹/div>
  38. ‹/template>
  39. ‹script lang="ts">
  40. import { defineComponent, reactive, ref } from 'vue'
  41. import { ElForm } from 'element-plus'
  42. export default defineComponent({
  43.   setup() {
  44.     const formData = reactive({
  45.       name: '',
  46.       subject: '',
  47.       grade: ''
  48.     })
  49.     const myform = ref‹InstanceType‹typeof ElForm>>()
  50.     // 查找
  51.     const submitForm = () => {
  52.       const { name, subject, grade } = formData
  53.       console.log(name, subject, grade)
  54.     }
  55.     // 重置
  56.     const submitReset = () => {
  57.       myform.value?.resetFields()
  58.     }
  59.     return {
  60.       formData,
  61.       myform,
  62.       submitForm,
  63.       submitReset
  64.     }
  65.   }
  66. })
  67. ‹/script>
  68. ‹style scoped lang="less">
  69. .mysearch {
  70.   padding: 20px;
  71. }
  72. ‹/style>
复制代码
区别:
       
  • 写法一由上到下,分别是JS、HTML、Css,类似于React的写法,逻辑也清晰   
  • 写法一由上到下,分别是HTML、JS、Css,和之前的Vue2写法类似   
  • 写法一的格式不需要将data,methods等内容进行导出,节省了代码量
重点:
  1、Element Plus的官网Demo的代码里面没有写prop
  1.   ‹el-form-item label="Activity name">
  2.       ‹el-input v-model="form.name">‹/el-input>
  3.     ‹/el-form-item>
复制代码
  为了实现数据的响应式,在写的时候需要自己绑定
2、使用el-form的ref需要引入ElForm
  1. import { ElForm } from 'element-plus'
  2. const myform = ref‹InstanceType‹typeof ElForm>>()
复制代码
  到此这篇关于Vue3+Element+Ts实现表单的基础搜索重置等功能的文章就介绍到这了,更多相关Element Ts表单搜索重置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 19:25 , Processed in 0.068266 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表