欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

vue3 + elementPlus reset重置表单问题

时间:2022-07-06 10:17:56|栏目:vue|点击:

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;

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

上一篇:vue中组件之间相互通信传值的几种方法详解

栏    目:vue

下一篇:vue如何使用el-table遍历循环表头和表体数据

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

本文地址:http://www.codeinn.net/misctech/207004.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有