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