vue3?+?elementPlus?reset重置表單問(wèn)題
更新時(shí)間：2022年05月27日 09:33:37 作者：jefferylong
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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)寫(xiě)重置按鈕時(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;
還是要多看官方文檔?。?！
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動(dòng)分頁(yè)預(yù)覽)
這篇文章主要介紹了vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動(dòng)分頁(yè)預(yù)覽)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue啟動(dòng)后請(qǐng)求后端接口報(bào)ERR_EMPTY_RESPONSE錯(cuò)誤的解決
這篇文章主要介紹了vue啟動(dòng)后請(qǐng)求后端接口報(bào)ERR_EMPTY_RESPONSE錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3+typescript實(shí)現(xiàn)圖片懶加載插件
這篇文章主要介紹了vue3+typescript實(shí)現(xiàn)圖片懶加載插件，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
Element中el-table動(dòng)態(tài)合并單元格(span-method方法)
本文主要介紹了Element中el-table動(dòng)態(tài)合并單元格(span-method方法)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
VUE實(shí)現(xiàn)自身整體組件銷(xiāo)毀的示例代碼
這篇文章主要介紹了VUE實(shí)現(xiàn)自身整體組件銷(xiāo)毀的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)三級(jí)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫(xiě)鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)題，就是本篇要探討的主要問(wèn)題，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖效果
這篇文章主要介紹了基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vant中的picker選擇器自定義選項(xiàng)內(nèi)容
這篇文章主要介紹了vant中的picker選擇器自定義選項(xiàng)內(nèi)容，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11