vue3 + elementPlus reset重置表单问题

目录
  • vue3 elementPlus reset重置表单
  • vue3 elementPlus 踩坑
    • 表单重置按钮resetForm失效

vue3 elementPlus reset重置表单

表单需加上ref属性

字段需加上prop属性

<template>
  <div class="main">
    <el-form ref="resetFormData" :model="formInline">
      <el-form-item label="姓名" prop="customerName">
        <el-input
          v-model="formInline.customerName"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-button type="warning" @click="resetForm">重置</el-button>
    </el-form>
  </div>
</template>
<script>
import { defineComponent, reactive, ref } from "vue";
export default defineComponent({
  setup() {
    const resetFormData = ref(null);
    const formInline = reactive({});
    
    const resetForm = () => {
      resetFormData.value.resetFields();
    };
    return {
      resetForm,
      resetFormData,
      formInline,
    };
  },
});
</script>

vue3 elementPlus 踩坑

表单重置按钮resetForm失效

在项目过程中按照之前的经验写重置按钮时发现不生效，换了原生的重置按钮也不行。后来发现还是版本移植的问题。

vue2.0和vue3.0的语法不一样，在main.js中引入resetform函数时语法出错

// Vue2.0 
Vue.prototype.resetForm = resetForm;
 
//Vue3.0 
let app = createApp(App);
 
//... 
app.config.globalProperties.resetForm = resetForm;

还是要多看官方文档啊！！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    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 for

  • Vue elementUI表单嵌套表格并对每行进行校验详解

    Vue elementUI表单嵌套表格并对每行进行校验详解

    目录 效果展示 代码链接 关键代码 表格数据 组件嵌套 校验方法 重置方法 完整代码 总结 效果展示 先看看这是不是需要的效果^_^ 如图,ElementUI 表单里嵌套了表格,表格内每行能进行[保存][新增][编辑][删除][重置]等操作,同时可以对每行的某些字段进行校验(而不是整个表单校验!),这种需求很常见,所以记录下来. 代码链接 gitee地址 关键代码 表格数据 // 数据格式必须是[对象嵌套数组],[form]绑定表单,[list]绑定表格 form: { // 表格数据 list

  • Vue3.0之引入Element-plus ui样式的两种方法

    Vue3.0之引入Element-plus ui样式的两种方法

    目录 第一种:CDN 第二种:通过 npm 安装,并希望配合 webpack 使用 安装:官网欢迎star:github npm install element-plus --save 第一种:CDN 目前可以通过 unpkg.com/element-plus 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用.<! – 引入样式 -->< link rel=“stylesheet” href=“https://unpkg.com/element-plus/lib/t

  • vue3 + elementPlus reset重置表单问题

    vue3 + elementPlus reset重置表单问题

    目录 vue3 elementPlus reset重置表单 vue3 elementPlus 踩坑 表单重置按钮resetForm失效 vue3 elementPlus reset重置表单 表单需加上ref属性 字段需加上prop属性 <template>   <div class="main">     <el-form ref="resetFormData" :model="formInline">    

  • JavaScript实现重置表单（reset）的方法

    本文实例讲述了JavaScript实现重置表单(reset)的方法.分享给大家供大家参考.具体如下: 下面的代码可以对表单内的输入数据进行重置 <!DOCTYPE html> <html> <head> <script> function formReset() { document.getElementById("frm1").reset(); } </script> </head> <body> &

  • vue3 element的Form表单用法实例

    目录 引言 设计目标 配置化 参数简单 自由度 实现过程 表单项的格式设计 v-bind的妙用 computed的妙用:实现v-model useAttrs的妙用 表单验证 上传文件 代码总结 到底应不应该使用json 需不需要v-model 性能问题 引言 最近在做一系列后台管理系统,其中用的最多的就是表单和表格了.这里讲一下我最近对表单封装的思考. 以下是我的设计思路以及具体实现,我使用的是vue3+element-plus,因此这个组件也是以这两个库为基础. 已上传npm www.npmj

  • vue实现重置表单信息为空的方法

    背景 之前表单重置为空的话是这样写的 this.fromline = { access_provider_name: '', // 接入商名称 access_provider_address: '', // 接入商所属地区 remark: '' // 备注 } 直接把表单对象的属性设置为空 今天突然发现一个这样的玩意 少写了好多代码 (开心) this.$refs['fromline'].resetFields() 这个玩意也可以实现表单重置. 以上这篇vue实现重置表单信息为空的方法就是小编分

  • 快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

    问题: 使用this.$ref['form'] .resetFields()无法重置表单项 原因: 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px&qu

  • jquery js 重置表单 reset()具体实现代码

    在开发中,我们会用到很多表单,我们希望表单提交以后,能reset, 但是jquery没有这个方法,怎么处理呢? 复制代码 代码如下: <form id="form1" action="" method="post" runat="server"> <input name="inp" id="inp" value="1" /> </form

  • 了解JavaScript表单操作和表单域

    一.表单的获取方式 1.document.getElementById() 2.document.forms[index]; 3.document.forms[form_name] 4.document.form_name function testGetForm() { var frm = document.getElementById("regForm"); // 常用 console.log(frm); frm = document.forms[0]; console.log(f

  • JavaScript实现表单元素的操作

    JavaScript实现表单元素的操作

    一.forms[]; Form 表单对象 document.forms[] 是一个数组,包含了文档中所有的表单(<form>).要引用单个表单,可以用 document.forms[x],但是一般来说,人们都会这样做:在<form>标记中加上“name="..."”属性,那么直接用 “document.<表单名>”就可以引用了. 1.属性 name 返回表单的名称,也就是<form name="...">属性. act

  • 使用jQuery重置(reset)表单的方法

    由于JQuery中,提交表单是像下面这样的: 复制代码 代码如下: $('#yigeform').submit() 所以,想当然的认为,重置表单,当然就是像下面这样子喽: 复制代码 代码如下: $('#yigeform').reset() 但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置! 后来,上网查了一下,说是,JQuery中没有reset方法,经核对,果然是没有. 那有么没有办法通过JQuery来重置表单呢,答案是有的,不过是一种间接的方法,如下: 复制代码 代码

随机推荐