vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 elementPlus reset重置表单

vue3 + elementPlus reset重置表单问题

作者:jefferylong

这篇文章主要介绍了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;

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文