最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定です(退職したバックエンドスタッフが以前書いたもので、コメントはありません。1つのコンポーネントが4,000行以上あり、本当にやる気がありません)。便宜上、プロジェクトを 14 個のコンポーネントに分割して簡素化しました。 全体的なアイデア
始めるここでは、2つのコンポーネントの分割を例に挙げます: form1、form2 (読者の便宜のため、命名を批判しないでください) ここで 2 つのコンポーネントがフォーム、ref、model にバインドされている理由は、後で説明します (後のメンテナンスの便宜のため) // フォーム1 コンポーネント <テンプレート> <el-フォーム ref="フォーム" :model="フォーム" ラベル幅="10px" > <el-form-item label="名前" prop="名前"> <el-input v-model="フォーム名" /> </el-form-item> </el-form> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'Form1'、 小道具: { 形状: {} }, データ() { 戻る { ルール: 名前: [ { 必須: true、メッセージ: '名前を入力してください'、トリガー: 'blur' } ] } } }, メソッド: { // ここで親コンポーネントをループして検証validForm()を呼び出します。{ 結果 = false とする this.$refs.form.validate(有効 => 有効 && (結果 = true)) 結果を返す } // ここでは別の方法で書きましたが、ループしてチェックするときには Promise オブジェクトになります。問題があります。大物たちが私にアドバイスをくれることを願っています。validForm() { // ここでの出力構造は明らかにブール値ですが、親コンポーネントのループ呼び出し後はプロミス型なので、変換する必要があります。 return this.$refs.form.validate().catch(e => console.log(e)) } } } </スクリプト> // form2 コンポーネント <テンプレート> <el-フォーム ref="フォーム" :model="フォーム" ラベル幅="10px" > <el-form-item label="年齢" prop="年齢"> <el-input v-model="form.age" /> </el-form-item> </el-form> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'Form2'、 小道具: { 形状: {} }, データ() { 戻る { ルール: 名前: [ { 必須: true、メッセージ: '年齢を入力してください'、トリガー: 'blur' } ] } } }, メソッド: { // ここで親コンポーネントをループして検証validForm()を呼び出します。{ 結果 = false とする this.$refs.form.validate(有効 => 有効 && (結果 = true)) 結果を返す } } } </スクリプト> 親コンポーネントがどのように参照されているかを確認する // 親コンポーネント <テンプレート> <div class="parent"> <form1 ref="form1" :form="formData.form1" /> <form2 ref="form2" :form="formData.form2" /> <el-button type="primary" @click="save">エラー</el-button> </div> </テンプレート> <スクリプト> ...参照を省略すると、export default { 名前: '親'、 ... 登録データを省略する() { 戻る { フォームデータ: { フォーム1: {}, フォーム2: {} } } }, } </スクリプト> formData の属性名 form1 と form2 はそれぞれサブフォーム コンポーネントの ref で使用されるため、トラバーサル中に順番に見つけることができ、保存関数を変更できます。コードは次のとおりです。 メソッド: { 保存 () { //各フォーム オブジェクトのキー値、つまり各フォームの参照値 const formKeys = Object.keys(this.formData) // 各フォームの検証メソッドを実行します const valids = formKeys.map(item => this.$refs[item].validForm()) // すべてのフォームが検証に合格した後のロジック if (valids.every(item => item)) { コンソール.log(11) } } } ref コンポーネントと model コンポーネントの両方が form にバインドされるのはなぜですか?
エクスポートデフォルト{ 小道具: { 形状: { 必須: true、 タイプ: オブジェクト、 デフォルト: () => {} }, }, メソッド: { 有効なフォーム(){ 結果 = false とする this.$refs.form.validate(有効 => 有効 && (結果 = true)) 結果を返す } } } form1 form2 内の minix を参照し、対応するコンポーネント内の対応するプロパティとメソッドを削除します。 結論
Vue+ElementUI が超大型フォームをどのように処理するかについての記事はこれで終わりです。Vue+ElementUI が超大型フォームをどのように処理するかについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTMLハイパーリンクaタグのhrefジャンプとonclick間の実行順序の例
>>: Nginx+ModSecurity セキュリティモジュールの導入
ウェブサイトをデザインするにはインスピレーションが必要です。良いインスピレーションを得るには、より多...
目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...
序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...
01 ウィンターフレーク(個人のみ) 02 スノートップキャップ(業務用) 03 モディウス「フリ...
目次1. Docker分散lnmpイメージ生成1. Nginx、MySQL、PHPコンテナを実行する...
クロージャは、純粋関数型プログラミング言語の伝統的な機能の 1 つです。クロージャをコア言語構造の不...
Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...
1. ダウンロードして解凍します: /Users/xiechunping/Softwares/mys...
この記事では、VMware 環境下で Ubuntu と Windows 間でファイルを共有する方法を...
例: mysqldump –all-databases を使用すると、すべてのライブラリがエクスポー...
解決策 1: HEAD に次のコードを挿入するなど、HTML ドキュメントで条件付きインポートを使用...
よく使用されるデータベースである MySQL では、多くの操作が必要です。デジタル操作には非常に便利...
CSSは複数のクラスにマッチする次の HTML タグ li、クラスはオープン スタイルです。私の要件...
目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...
インターフェースの役割:インターフェース (英語: interface) の機能は、簡単に言えば、コ...