ElementUI中el-form實現表單重置以及將方法抽出為全局方法

場景

使用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-input
              v-model="queryParams.xm"
              placeholder="請輸入員工名稱"
              clearable
              size="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");
    },