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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)
這幾天在做項目時遇到微信掃描二維碼的然后進入公眾號網(wǎng)頁巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時候，順利的一塌糊涂，然后到了蘋果端的時候，就只能出現(xiàn)一個保存圖片，然后就寫一下記錄一下這問題的解決方法2020-01-01
這篇文章主要為大家介紹了vue3?emits事件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了Vue中關閉彈窗組件時銷毀并隱藏操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vite+vue3中require?is?not?defined問題及解決
這篇文章主要介紹了vite+vue3中require?is?not?defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了在antd Form表單中select設置初始值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關于VUE配置history路由模式配置的相關資料,History模式是Vue路由的另一種模式,在History模式下URL中的路徑不再使用#符號,而是直接使用正常的路徑形式,需要的朋友可以參考下2023-12-12
項目中有一個需要預覽下載pdf的需求,網(wǎng)上找了很久,決定使用 pdf.js 完成,下面這篇文章主要給大家介紹了關于使用Vue3+PDF.js實現(xiàn)PDF預覽功能的相關資料,需要的朋友可以參考下2022-12-12
vue3+ts import引入第三方js文件報錯的2種解決方法
這篇文章主要給大家介紹了關于vue3+ts import引入第三方js文件報錯的2種解決方法,在Vue中通常我們引入一個js插件都是使用npm方式下載然后import使用的,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue實現(xiàn)element-ui對話框可拖拽功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了讓Vue響應Map或Set的變化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11