vue3與elementPlus?reset重置表單問(wèn)題怎么解決

今天小編給大家分享一下vue3與elementPlus reset重置表單問(wèn)題怎么解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

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="請(qǐng)輸入姓名"
        ></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失效

在項(xiàng)目過(guò)程中按照之前的經(jīng)驗(yàn)寫重置按鈕時(shí)發(fā)現(xiàn)不生效，換了原生的重置按鈕也不行。后來(lái)發(fā)現(xiàn)還是版本移植的問(wèn)題。

vue2.0和vue3.0的語(yǔ)法不一樣，在main.js中引入resetform函數(shù)時(shí)語(yǔ)法出錯(cuò)

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

以上就是“vue3與elementPlus reset重置表單問(wèn)題怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。