ElementUIはel-formフォームリセット機能ボタンを実装します

ElementUIはel-formフォームリセット機能ボタンを実装します

ビジネスシナリオ:

el-form を使用する場合、リセット ボタンまたはキャンセル ボタンをクリックするとフォームがリセットされます。

リセット機能ボタン機能を実装するための詳細な手順:

まず最初に、el-form に ref 属性を追加します。

<el-form :inline="true" :model="queryParams" ref="queryForm">

2番目: リセットボタンをクリックして実行されるメソッドで、次の関数コードスニペットを実行します。

 リセット(){
        # リクエストパラメータのエンティティ属性をリセットします this.queryParams = {
          メンバー名: 未定義、
          タイプID: 未定義、
        };
        #フォーム属性値のリセットを指定します。this.$refs["form" ].resetFields();
      }

効果のデモンストレーション:

デフォルトの表示ページ:

検索結果ページ:

効果のリセットページ:

Vue ページのソースコード:

<スタイル>
</スタイル>
<テンプレート>
  <div>
    <el-col :span="19">
      <el-form :inline="true" :model="queryParams" ref="queryForm">
        <el-form-item label="名前">
          <el-input v-model="queryParams.memberName" placeholder="名前"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="text-align:right">
            <!--カスタム searchHandler 関数-->
            <el-button type="primary" @click="searchHandler">クエリ</el-button>
            <!---->
            <el-button type="primary" @click="reset">リセット</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-col>
    <p style="text-align: left; margin-bottom: 10px;">
      <el-button type="primary" @click="dialogFormAdd = true">追加</el-button>
    </p>
    <el-行>
      <el-テーブル
        :data="テーブルデータ"
        スタイル="幅: 100%">
        <el-テーブル列
          v-for="(データ、インデックス) in tableHeader"
          :key="インデックス"
          :prop="データ.prop"
          :label="データラベル"
          :min-width="データ['min-width']"
          :align="データ.align">
        </el-table-column>
        <el-テーブル列
          prop="メンバーの性別"
          label="性別">
          <template slot-scope="scope">{{ scope.row.memberSex === 1 ? '男' : '女' }}</template>
        </el-table-column>
        <el-テーブル列
          プロパティ="memberStatic"
          label="メンバーステータス">
          <template slot-scope="scope">{{ scope.row.memberStatic === 1 ? '正常' : '異常' }}</template>
        </el-table-column>
        <el-テーブル列
          ラベル="操作"
          最小幅="240">
          <テンプレート スロット スコープ="スコープ">
            <el-button type="primary" size="mini" @click="toEdit(scope)">編集</el-button>
            <el-button type="danger" size="mini" @click="deleteMember(scope)">削除</el-button>
          </テンプレート>
        </el-table-column>
      </el-table>
      <br>
      <el-ページネーション
        @size-change="ハンドルサイズ変更"
        @current-change="現在の変更を処理する"
        :current-page="ページ区切りページインデックス"
        :ページサイズ="[5, 10, 20, 30, 40]"
        :page-size=ページネーション.ページサイズ
        layout="total, sizes, prev, pager, next, jumper"
        :total=ページネーション合計>
      </el-pagination>
    </el-row>
 
    <el-dialog title="生徒を追加" :visible.sync="dialogFormAdd">
      <el-form :model="メンバー">
        <el-form-item label="名前" >
          <el-input v-model="member.memberName" オートコンプリート="オフ"></el-input>
        </el-form-item>
 
      </el-form>
      <div スロット="フッター" クラス="ダイアログ フッター">
        <el-button @click="dialogFormAdd = false">キャンセル</el-button>
        <el-button type="primary" @click="add(student)">OK</el-button>
      </div>
    </el-ダイアログ>
 
    <el-dialog title="生徒の変更" :visible.sync="dialogFormEdit">
      <el-form :model="メンバー">
        <el-form-item label="名前" >
          <el-input v-model="member.memberName" オートコンプリート="オフ"></el-input>
        </el-form-item>
      </el-form>
      <div スロット="フッター" クラス="ダイアログ フッター">
        <el-button @click="dialogFormEdit = false">キャンセル</el-button>
        <el-button type="primary" @click="edit(student)">OK</el-button>
      </div>
    </el-ダイアログ>
 
  </div>
</テンプレート>
 
<スクリプト>
  エクスポートデフォルト{
    名前: 'メンバー',
    データ () {
      戻る {
        テーブルデータ: [],
        dialogFormEdit: false、
        ダイアログフォーム追加:false、
        メンバー: {
          メンバーID: ''、
          メンバー名: ''、
          メンバー電話番号: '',
          メンバー年齢: '',
          タイプ名: ''、
          7月日付: '',
          メンバー静的:''、
          メンバー残高:''、
          メンバーxufei:''
        },
        クエリパラメータ:{
          メンバー名:''、
          タイプID:''
        },
        ページネーション:
          ページインデックス: 1,
          ページサイズ: 10,
          合計: 0,
        },
        テーブルヘッダー: [
          {
            プロパティ: 'メンバーID',
            ラベル: '会員番号'、
            配置: '左'
          },
          {
            プロパティ: 'メンバー名',
            ラベル: '名前',
            配置: '左'
          },
          {
            プロパティ: 'memberPhone',
            ラベル: '電話'、
            配置: '左'
          },
          {
            プロパティ: 'memberAge',
            ラベル: '年齢'、
            配置: '左'
          },
          {
            プロパティ: 'membertypes.typeName',
            ラベル: 'カードタイプ'、
            配置: '左'
          },
          {
            プロパティ: 'nenberDate',
            ラベル: 'エントリー日'、
            配置: '左'
          },
          {
            プロパティ: 'メンバーバランス',
            ラベル: 「会員残高」、
            配置: '左'
          },
          {
            プロパティ: 'memberxufei',
            ラベル: 「有効期限」、
            配置: '左'
          }
        ]
      }
    },
    メソッド: {
      初期化(){
        var 自己 = これ
        this.$axios({
          メソッド:'post',
          url:'/メンバー/クエリ',
          データ:{"ページ番号":this.pagination.pageIndex,"ページサイズ":this.pagination.pageSize,"ktype": 0},
          ヘッダー:{
            'Content-Type':'application/json;charset=utf-8' //ここを変更するだけです}
        }).then(res => {
          コンソールログ(res);
          自己ページネーション合計 = res.data.total;
          セルにデータ行を追加します。
        })
          .catch(関数 (エラー) {
            コンソール.log(エラー)
          })
      },
      ハンドルサイズ変更(val) {
        this.pagination.pageSize = val;
        this.pagination.pageIndex = 1;
        これを初期化します。
      },
      現在の変更を処理する(val) {
        this.pagination.pageIndex = val;
        これを初期化します。
      },
      追加(生徒) {
        this.$axios({
          メソッド:'post',
          url:'/student/insert',
          データ:{'name': 学生の名前、'sex': 学生の性別、'age': 学生の年齢、'college': 学生の大学、'className': 学生のクラス名},
          ヘッダー:{
            'Content-Type':'application/json;charset=utf-8' //ここを変更するだけです}
        }).then(res => {
          this.$message.success('正常に追加されました')
          this.dialogFormAdd = false
          この.init()
        })
          .catch(関数 (エラー) {
            コンソール.log(エラー)
          })
      },
      toEdit (スコープ) {
        this.student.sid = スコープ行.sid
        this.student.name = スコープ行名
        this.student.sex = スコープ行の性別
        this.student.age = スコープ行の年齢
        this.dialogFormEdit = true
      },
      編集(学生){
        var パラメータ = {
          'sid' : 学生.sid,
          '名前' : 学生名、
          '性別' : 学生.性別,
          '年齢' : 学生の年齢
        }
 
        this.$axios({
          メソッド:'post',
          url:'/student/update',
          データ:パラメータ、
          ヘッダー:{
            'Content-Type':'application/json;charset=utf-8' //ここを変更するだけです}
        }).then(res => {
          this.$message.success('変更に成功しました')
          this.dialogFormEdit = false
          この.init()
        }).catch(関数(エラー) {
          コンソール.log(エラー)
        })
      },
      メンバーの削除 (スコープ) {
        デバッガ;
        if (!scope.row.memberId) {
          this.tableData.splice(スコープ.$index, 1)
        } それ以外 {
          this.$confirm('削除するかどうか確認', 'プロンプト', {
            confirmButtonText: '確認'、
            cancelButtonText: 'キャンセル'、
            タイプ: '警告'、
            中心: 真
          })
            .then(() => {
              コンソールログ(スコープ行メンバーID)
              this.$axios.get('/menber/delete/' + scope.row.memberId).then(res => {
                this.$message.success('正常に削除されました')
                この.init()
              })
                .catch(関数 (エラー) {
                  コンソール.log(エラー)
                })
            })
            .catch(() => {
              this.$メッセージ({
                タイプ: '情報'、
                メッセージ: '削除されました'
              })
            })
        }
      },
      検索ハンドラ() {
        var 自己 = これ
        this.$axios({
          メソッド:'post',
          url:'/メンバー/クエリ',
          データ:{"pageNumber":this.pagination.pageIndex,"pageSize":this.pagination.pageSize,"ktype": 0, "hyname":this.queryParams.memberName},
          ヘッダー:{
            'Content-Type':'application/json;charset=utf-8' //ここを変更するだけです}
        }).then(res => {
          コンソールログ(res);
          自己ページネーション合計 = res.data.total;
          セルにデータ行を追加します。
        })
          .catch(関数 (エラー) {
            コンソール.log(エラー)
          })
      },
      リセット(){
        this.queryParams = {
          メンバー名: 未定義、
          タイプID: 未定義、
        };
        this.$refs["form" ].resetFields();
      }
    },
    マウント: 関数 () {
      この.init()
    }
  }
</スクリプト>

ElementUI の el-form フォームリセット機能ボタンの実装に関するこの記事はこれで終わりです。Element el-form フォームリセットに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue+ElementUIはダイアログボックスを閉じ、検証をクリアし、フォーム操作をクリアします。
  • Vue ElementUI フォームのフォーム検証
  • Vue+elementui ダイアログボックスのキャンセルフォーム検証リセットの例
  • vue+elementui (ダイアログボックスのフォームのリセットの問題)

<<:  Dockerを使用してSpringBootプロジェクトをデプロイする方法

>>:  MySQLからClickHouseに移行する5つの方法

推薦する

垂直グリッドと漸進的な行間隔の例

新しい質問急いで来て、急いで行ってください。 「垂直グリッドとプログレッシブ行間隔 (パート 1)」...

バントリストコンポーネントをスクロールしても、スクロールバーの位置は保持されます。

バントリストコンポーネントをスクロールするときに、スクロールバーの位置が保持されます。これは、kee...

CSS を使用してテクスチャ付きグラデーション背景画像を記述するためのサンプル コード

プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...

WeChatアプレットの入力レベルとテキストエリアレベルの浸透率が高すぎる問題の解決策

WeChat ミニプログラムのネイティブ コンポーネントであるカメラ、キャンバス、入力 (フォーカス...

入力ボックスの値を取得する方法のReactの例

入力ボックスの値を取得する複数の方法最初の方法は、制御されていないコンポーネントの取得です2番目の方...

Docker-compose を使用して ELK クラスターを構築する方法

すべてのオーケストレーション ファイルと構成ファイルは、私の Github からアクセスできます。構...

エラー 1862 (HY000): パスワードの有効期限が切れています。ログインするには、..... を使用してパスワードを変更する必要があります。

エラーメッセージ:エラー 1862 (HY000): パスワードの有効期限が切れています。ログインす...

MySQL IFNULL判定問題の解決方法

問題: mybatis によって返される null 型のデータが消え、フロントエンドの表示にエラーが...

PrometheusはGrafanaディスプレイを使用してMySQLを監視します

目次Prometheusはエクスポーターを介してMySQLを監視し、Grafanaチャートで表示しま...

select @@session.tx_read_only が DB に大量に出現するのはなぜですか?

問題を見つける上位の SQL ステートメントを取得すると、DB が大量のselect @@sessi...

MySQL スロークエリを通じて MySQL のパフォーマンスを最適化する方法

アクセス数が増えると、MySQL データベースへの負荷が増大します。MySQL アーキテクチャを使用...

jsはブラウザを閉じるときにアカウントのログアウトを処理します

目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...

Dockerに証明書を追加する方法

1. アップグレードプロセス: sudo apt-get updateパッケージが見つからない、パッ...

Nginx リバース プロキシを使用してクロスドメイン問題を解決する方法の詳細な説明

質問前回のクロスドメイン リソース共有に関する記事では、ドメイン間で Cookie を送信する場合、...

Mac での MySQL と Squel Pro の設定

Node.js の人気に応えて、最近、いくつかのサーバー側機能を実装するために Node.js を使...