場景

使用el-form時，點擊重置按鈕或者取消按鈕時會實現表單重置效果。

那么el-form怎樣實現表單重置，如果在多個頁面需要用到重置，怎樣將此方法抽出為全局的方法，在需要用到的地方直接引用。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

實現重置

首先給el-form添加ref屬性。

? <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">

然后在點擊重置按鈕執行的方法中

this.$refs["queryForm" ].resetFields();

其中這里的queryForm要和上面的對應。

這種一般用于搜索參數時的重置按鈕的操作。

?

在el-form中要重置的項要添加prop屬性

????????? <el-form-item label="員工名稱" prop="xm"><el-inputv-model="queryParams.xm"placeholder="請輸入員工名稱"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item>

除了重置查詢參數在點擊新增或者編輯按鈕后彈出頁面后點擊取消按鈕時也要實現重置操作。

在點擊取消按鈕對應的事件中

??? reset() {this.form = {id: undefined,bcbh: undefined,};this.$refs["form" ].resetFields();},

首先將此form通過

<el-form ref="form" :model="form" :rules="rules" label-width= "100px">

綁定的表單的model下的要清空的所有的輸入框對應的prop的屬性設置為undefined,

然后再執行重置的操作。

將重置方法抽出為全局方法

首先在main.js中掛載一個全局方法

Vue.prototype.resetForm = resetForm

賦值為從第三方js中引入的resetForm方法。其中badao.js用來存放一些通用的工具類方法。

import {? resetForm } from "@/utils/badao";

在引入來源的badao.js中

// 表單重置 export function resetForm(refName) {if (this.$refs[refName]) {this.$refs[refName].resetFields();} }

將此方法進行暴露。

接受的參數為要重置的表單的ref屬性的值。

那么在進行重置查詢參數時

??? resetQuery() {this.resetForm("queryForm");},

在取消時重置表單

??? reset() {this.form = {id: undefined,bcbh: undefined,};this.resetForm("queryForm");},

?

總結

以上是生活随笔為你收集整理的ElementUI中el-form实现表单重置以及将方法抽出为全局方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。