广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue3 + elementPlus reset重置表单问题
  • 696
分享到

vue3 + elementPlus reset重置表单问题

2024-04-02 19:04:59 696人浏览 安东尼
摘要

目录vue3 elementPlus reset重置表单Vue3 elementPlus 踩坑表单重置按钮resetFORM失效vue3 elementPlus reset

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;

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue3 + elementPlus reset重置表单问题

本文链接: https://www.lsjlt.com/news/149899.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作