Vue+ElementUI で超大規模なフォーム例を処理する方法

Vue+ElementUI で超大規模なフォーム例を処理する方法

最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定です(退職したバックエンドスタッフが以前書いたもので、コメントはありません。1つのコンポーネントが4,000行以上あり、本当にやる気がありません)。便宜上、プロジェクトを 14 個のコンポーネントに分割して簡素化しました。

全体的なアイデア

  • 大きなフォームはビジネスモジュールごとに分割されます
  • 保存するときに、el-form が提供する検証メソッドを使用して検証します (分割された各コンポーネントをループします)
  • Mixin は各コンポーネントの共通抽出です (後のプロジェクトのメンテナンスにも役立ちます)

始める

ここでは、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 にバインドされるのはなぜですか?

  • 比較すると、form1 と form2 には共通の props メソッドがあることがわかります。
  • mixinで抽出してみましょう
エクスポートデフォルト{
  小道具: {
    形状: {
      必須: true、
      タイプ: オブジェクト、
      デフォルト: () => {}
    },
  },
  メソッド: {
    有効なフォーム(){
      結果 = false とする
      this.$refs.form.validate(有効 => 有効 && (結果 = true))
      結果を返す
    }
  }
}

form1 form2 内の minix を参照し、対応するコンポーネント内の対応するプロパティとメソッドを削除します。

結論

  • フォームが大きすぎる問題を解決するのは非常に面倒です。ここではコンポーネントを分割するだけです
  • コンポーネント間の連携も大きな難関です。次回は完成してから投稿します。

Vue+ElementUI が超大型フォームをどのように処理するかについての記事はこれで終わりです。Vue+ElementUI が超大型フォームをどのように処理するかについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueの基本 ElementUIのフォームの詳しい説明
  • Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明
  • フォームから Vue ElementUI を使用してログイン効果を実装する例
  • Vue ElementUI フォームのフォーム検証
  • Vue Element-ui フォーム検証ルールの実装
  • Vue2 での Element UI フォームの使用に関する詳細な説明

<<:  HTMLハイパーリンクaタグのhrefジャンプとonclick間の実行順序の例

>>:  Nginx+ModSecurity セキュリティモジュールの導入

推薦する

角度付き双方向バインディングの詳細な説明

目次双方向バインディングの原理ngモデルレンダリングカスタム双方向バインディングプロパティコンポーネ...

CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス

セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

変換を使用して純粋な CSS ポップアップ メニューを実装するためのサンプル コード

序文トップメニューを作成する場合、ポップアップのセカンダリメニューを作成する必要があります。 以前の...

1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

1. 単一行オーバーフロー1. 1 行がオーバーフローした場合、超過部分は表示されます...または、...

JavaScript でツリー構造を構築するための効率的なアルゴリズムについての簡単な説明

目次導入アイデアID配列インデックスのマッピング関係を確立するツリー構造の構築原理要約する導入組織階...

MySQL 学習: データベース テーブルの 5 つの主要な制約を初心者向けに詳しく説明します

目次1. 制約の概念と分類2. 5つの制約の追加と削除2.1 制約を追加する6つの方法2.2 制約を...

VMware Workstation 14 Pro のインストールとアクティベーションのグラフィック チュートリアル

この記事では、VMware Workstation 14 Proのインストールとアクティベーションに...

TortoiseSvn Little Turtle インストール 最新の詳細なグラフィックチュートリアル

tortoiseGit のインストール時にいつも問題があったので、単純に svn に変更しました。途...

ノードイベントループとメッセージキューの分析

目次非同期とは何ですか?なぜ非同期性が必要なのでしょうか?非同期IOとは何ですか?イベントループとは...

Nodejs は readline を使用してコンテンツ入力を促すサンプルコード

目次序文1. batがjsを実行する2. ターミナルにバージョン番号を入力してパッケージ化コマンドを...

MySQL でファイルデータをインポートする際の 1290 エラーの解決方法

エラーシナリオcmd の mysql コマンドを使用して、学生情報テーブルにデータを追加します。デー...

UbuntuにMySQLをインストールするときにデフォルトのパスワードを変更する詳細な手順

ステップ1: ディレクトリに入ります: cd /etc/mysql、debian.cnfファイルを表...

Centos7 で yum を使用して Ceph 分散ストレージをインストールするチュートリアル

目次序文yumソース、epelソースを設定するCephソースの設定Cephとそのコンポーネントをイン...

JavaScriptイテレータを学ぶ

目次導入js のイテレータはどのように見えるか反復プロトコル反復可能なプロトコルイテレータプロトコル...