ビジネスシナリオ: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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Dockerを使用してSpringBootプロジェクトをデプロイする方法
>>: MySQLからClickHouseに移行する5つの方法
新しい質問急いで来て、急いで行ってください。 「垂直グリッドとプログレッシブ行間隔 (パート 1)」...
バントリストコンポーネントをスクロールするときに、スクロールバーの位置が保持されます。これは、kee...
プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...
WeChat ミニプログラムのネイティブ コンポーネントであるカメラ、キャンバス、入力 (フォーカス...
入力ボックスの値を取得する複数の方法最初の方法は、制御されていないコンポーネントの取得です2番目の方...
すべてのオーケストレーション ファイルと構成ファイルは、私の Github からアクセスできます。構...
エラーメッセージ:エラー 1862 (HY000): パスワードの有効期限が切れています。ログインす...
問題: mybatis によって返される null 型のデータが消え、フロントエンドの表示にエラーが...
目次Prometheusはエクスポーターを介してMySQLを監視し、Grafanaチャートで表示しま...
問題を見つける上位の SQL ステートメントを取得すると、DB が大量のselect @@sessi...
アクセス数が増えると、MySQL データベースへの負荷が増大します。MySQL アーキテクチャを使用...
目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...
1. アップグレードプロセス: sudo apt-get updateパッケージが見つからない、パッ...
質問前回のクロスドメイン リソース共有に関する記事では、ドメイン間で Cookie を送信する場合、...
Node.js の人気に応えて、最近、いくつかのサーバー側機能を実装するために Node.js を使...