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 セキュリティモジュールの導入

推薦する

私が良いと思うクールなデザインサイトをいくつかまとめてみました。

ウェブサイトをデザインするにはインスピレーションが必要です。良いインスピレーションを得るには、より多...

Linux での MySQL のインストールに関するチュートリアル

目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...

MySQL インデックスクエリ最適化スキルを習得するための記事

序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...

ダウンロードにおすすめの氷と雪のフォント 33 種類 (個人用および商用)

01 ウィンターフレーク(個人のみ) 02 スノートップキャップ(業務用) 03 モディウス「フリ...

Dockerを使用して分散lnmpイメージを作成する

目次1. Docker分散lnmpイメージ生成1. Nginx、MySQL、PHPコンテナを実行する...

JavaScript のクロージャの問題の詳細な説明

クロージャは、純粋関数型プログラミング言語の伝統的な機能の 1 つです。クロージャをコア言語構造の不...

Mysql マスタースレーブ サービスの実装例を構成する

Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...

Mac でソースコードから MySQL 5.7.17 をコンパイルしてインストールするチュートリアル

1. ダウンロードして解凍します: /Users/xiechunping/Softwares/mys...

VMware での Ubuntu と Windows 間のファイル共有

この記事では、VMware 環境下で Ubuntu と Windows 間でファイルを共有する方法を...

mysqldump でデータベースをバックアップするときに特定のライブラリを除外する例

例: mysqldump –all-databases を使用すると、すべてのライブラリがエクスポー...

判定条件を使用してCSSファイルをインポートする

解決策 1: HEAD に次のコードを挿入するなど、HTML ドキュメントで条件付きインポートを使用...

MySQL のデータ統計に関するヒント

よく使用されるデータベースである MySQL では、多くの操作が必要です。デジタル操作には非常に便利...

CSS が複数のクラスに一致する方法のサンプルコード

CSSは複数のクラスにマッチする次の HTML タグ li、クラスはオープン スタイルです。私の要件...

アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します

目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...

TypeScript インターフェース定義ケースチュートリアル

インターフェースの役割:インターフェース (英語: interface) の機能は、簡単に言えば、コ...