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